/**
	
* Template Name: Beautyqueen - Spa & Beauty Salon HTML5 Template
* Version: 2.1
* Author: Themetrading
* Email: themetrading@gmail.com
* Developed By: Themetrading
* First Release: 30 October, 2018
* Last Update: 29 October, 2020
* Author URL: www.themetrading.com

**/
/*==============================================================
Table of CSS Content Arrage With Every Section Name
================================================================
01. color css
02. Default Css
03.	Header Section
04.	About Section
05.	Services Section
06.	Gallery Section
07.	Our Team
08.	Join us Section
09.	Price Table Section
10.	Video Section
11.	Blog Section
12.	Testimonial Section
13.	Map and Contact section
14.	Contact info
15.	Scroll Top
16.	Resarvation Form
17.	Banner
18.	Sidebar
19.	Single Post
20.	Responsive Media Queries Css
21.	Color Settings
22.	Default Animation Css
23.	Loader Css
================================================================*/

/* 01.	color css
================================================================*/
/*  primary color */
.color-primary,
.filters ul li.active,
.filters ul li:hover,
.default-portfolio-item .overlay-box,
.socal-icon ul li:hover a,
.video-icon i,
.blog-info span .fa,
.blog-title:hover,
.Breadcrumb li.active,
.categories li a:hover,
a.post-title:hover,
.blog-info li a .fa,
.share-icon ul li a:hover {
  /*  color: var(--primary-theme-color); */
  color: #43788F;
}

.bg-primary,
.socal-icon ul li,
.service-widget:hover,
.team-widget:hover {
  background-color: var(--primary-theme-color) !important;
}

.socal-icon ul li,
.socal-icon ul li:hover,
.owl-carousel button.owl-dot {
  border-color: var(--primary-theme-color) !important;
}

/*  secondery color */
.color-secondery {
  color: var(--secondery-theme-color);
}

/*  Body font color */
body,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--body-color);
}

/* Gray color */

.bg-gray {
  background-color: var(--gray-color);
}

.categories li {
  border-color: var(--gray-color) !important;
}

/* Black color */
.color-black,
.inner-title:hover,
.service-widget:hover .inner-title,
.service-widget:hover,
.blog-title,
.blog-info a,
.contact_message .error,
#success,
.categories li a,
a.post-title,
.blog-info li a,
.share-icon ul li a,
.filters ul li,
.member-content,
.reservation-form .form-group label {
  color: var(--black-color);
}

.bg-black,
.owl-carousel button.owl-dot,
blockquote {
  background-color: var(--black-color);
}

.form-control:focus,
select:focus,
.owl-carousel button.owl-dot.active span:before {
  border-color: var(--black-color) !important;
}

/* White color */
.color-white,
.navbar-light .navbar-nav .nav-link,
.default-portfolio-item .overlay-box span i.fa,
.socal-icon ul li a,
.team-widget:hover .member-data,
.contact-icon,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:focus,
.Breadcrumb li a,
.single-post blockquote p,
.coppyright span,
.coppyright a {
  color: var(--white-color);
}

#scroll span {
  border-bottom-color: var(--white-color) !important;
}

.single-post blockquote p,
.navbar .navbar-collapse ul li:last-child a {
  border-color: var(--white-color) !important;
}

.bg-white,
.form-control,
.service-widget,
.navbar-light .navbar-nav .nav-link:before {
  background-color: var(--white-color);
}

/* color gradient */
.bg-gradient,
.fixed-header,
.on-panel,
.navbar .navbar-collapse ul li:last-child {
  background: #43788F;
}

/* overlay black */
.team-image .teamimg-overlay,
.default-portfolio-item .overlay-box {
  background-color: var(--color-overlay-black-50);
}

/* btn color */
.btn-primary {
  background-color: var(--primary-theme-color);
  color: var(--color-white);
  border-color: var(--primary-theme-color);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--primary-theme-color);
  border-color: var(--primary-theme-color);
}

.btn-gradient {
  background-image: var(--linear-gradient-color);
  color: var(--black-color);
  border-color: var(--primary-theme-color);
}

.btn-gradient:hover {
  background-position: right center;
}

.btn-gradient {
  background-size: 200% auto;
}

.btn-black {
  background-color: #43788F;
  color: var(--white-color);
  border-color: #43788F;
}

.btn-black:hover {
  background-color: transparent;
  color: var(--black-color);
  border-color: var(--black-color);
}

.btn-link {
  color: var(--black-color);
}

.btn-link:hover {
  color: var(--primary-theme-color);
}

.form-control,
select {
  color: #999;
  border: 1px solid #c7c7c7;
}

/*  02. Default Css
================================================================*/
body {
  font-family: var(--theme-body-font);
  font-size: 14px;
  line-height: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--theme-highlight-font);
}

h1 {
  font-size: 36px;
  line-height: 42px;
}

h2 {
  font-size: 28px;
  line-height: 42px;
}

h3 {
  font-size: 24px;
  line-height: 36px;
}

h4 {
  font-size: 18px;
  line-height: 22px;
}

h5 {
  font-size: 16px;
  line-height: 28px;
}

h6 {
  font-size: 14px;
  line-height: 24px;
}

h1,
h2 {
  font-weight: 900;
}

h3,
h4 {
  font-weight: 700;
}

h5,
h6 {
  font-weight: 500;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none
}

a {
  text-decoration: none !important
}

a:focus,
button:focus,
select:focus {
  outline: none;
}

.btn.focus,
.btn:focus {
  box-shadow: none;
}

img {
  width: 100%;
}

.full-row {
  width: 100%;
  position: relative;
}

.w-80 {
  width: 80%;
}

.btn {
  padding: 10px 30px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-transform: capitalize;
  text-align: center;
  letter-spacing: 2px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 0px;
  border: 1px solid transparent;
}

.sub-title {
  font-family: var(--theme-body-font);
  color: #373531;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: block;
}

.ls-outline .ls-nav-prev,
.ls-outline .ls-nav-next {
  z-index: 111 !important;
}

/*	Icon size
================================*/
.icon-font-30 [class^="flaticon-"]::before,
.icon-font-30 [class*=" flaticon-"]::before,
.icon-font-30 [class^="flaticon-"]::after,
.icon-font-30 [class*=" flaticon-"]::after {
  font-size: 30px;
  margin-left: 0px;
}

/*	Background Image
=======================================*/
.background-1 {
  background: url(../images/joinus.jpg) fixed no-repeat;
  background-position: center center;
  width: 100%;
  background-size: cover;
}

.background-2 {
  background: url(../images/video.jpg) fixed no-repeat;
  background-position: center center;
  background-size: cover;
}

.background-2v {
  background: url(../images/video-2.jpg) fixed no-repeat;
  background-position: center center;
  background-size: cover;
}

.background-3 {
  background-image: url(../images/bannar.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*	Overlay 
=======================================*/
[class*="overlay-"] {
  position: relative;
}

[class*="overlay-"]:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.overlay-black:before {
  background-color: rgba(0, 0, 0, .50);
}

/*	Default Margin, Padding and Letter Spacing
=====================================================*/
.py-80 {
  padding-top: 80px;
  padding-bottom: 80px
}

.pt-80 {
  padding-top: 80px;
}

.letter-space-1 {
  letter-spacing: 1px;
}

/*	03.	Header Section
================================================================*/
.navbar-expand-lg .navbar-nav .nav-link {
  margin-right: 3px;
  margin-left: 3px;
  font-size: 14px;
}

.navbar .navbar-collapse ul li:last-child {
  width: 0px;
  height: 0px;
  line-height: 0px;
}

.navbar .navbar-collapse ul li:last-child a {
  /*    border: 1px solid transparent; */
  margin: 0px;
  width: px;
  height: 45px;
  line-height: 26px;
  text-align: center;

}

.nav-on-top {
  padding: 0;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
  animation-fill-mode: both;
}

#header {
  right: 0px;
  left: 0;
  z-index: 112;
  /*    background-color: transparent; */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.75);
}

.fixed-header {
  left: 0;
  padding: 0;
  position: fixed;
  top: -100px;
  transform: translateY(100px);
  transition: transform .5s;
  width: 100%;
  z-index: 100;
}

.navbar-light .navbar-nav .nav-link {
  position: relative;
}

.navbar-light .navbar-nav .nav-link:before {
  position: absolute;
  content: "";
  width: 100%;
  display: table;
  height: 2px;
  left: 0px;
  bottom: 0px;
  opacity: 0;
}

.navbar-light .navbar-nav .nav-link.active:before {
  opacity: 1;
}

/*	04.	About Section
================================================================*/
.text-area p span {
  font-family: var(--theme-highlight-font);
  font-size: 24px;
  line-height: 28px;
  font-style: normal;
  text-align: center;
  font-weight: 600;
  color: #403F41;
}

/*	05.	Services Section
================================================================*/
.service-iconprice .ser-icon,
.service-iconprice .ser-price {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}

.service-iconprice .ser-icon {
  position: absolute;
  left: 15px;
}

.service-iconprice .ser-price {
  position: absolute;
  right: 15px;
}

.text-gray {
  color: #7a7a7a;
}

h4 {
  color: #43788F;
}

/*	06.	Gallery Section
================================================================*/
.filters ul li {
  float: left;
  margin: 0px 15px;
  cursor: pointer;
  font-family: var(--theme-highlight-font);
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 500;
}

.subtitle-gallery {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 47px;
  margin-bottom: 25px;
  text-align: center;
  color: #403F41;
}

.margin-top {
  margin-top: 40px;
}

.filter-list .mix {
  display: none;
}

.default-portfolio-item {
  position: relative;
}

.default-portfolio-item .overlay-box span {
  position: absolute;
  top: 45%;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
}

.default-portfolio-item .overlay-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  visibility: hidden;
}

.default-portfolio-item .overlay-box span i.fa {
  border: 2px solid;
  border-radius: 50%;
  padding: 3px 5px;
  text-align: center;
  font-size: 24px;
}

.default-portfolio-item:hover .overlay-box {
  opacity: 1;
  visibility: visible;
}

/*	07.	Our Team
================================================================*/
.team-widget {
  overflow: hidden;
  position: relative;
  border-radius: 135px 135px 0px 0px;
}

.team-image .member-data {
  position: absolute;
  top: 50%;
  overflow: hidden;
  opacity: 0;
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
  height: auto;
  display: table;
}

.team-image {
  position: relative;
}

.team-image .teamimg-overlay {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
}

.team-widget:hover .team-image .teamimg-overlay,
.team-widget:hover .team-image .member-data {
  opacity: 0;
  visibility: visible;
}

.team-widget:hover .member-data {
  visibility: hidden;
  opacity: 0;
}

.team-widget:hover .member-content p {
  display: block;
  opacity: 1
}

.member-content p {
  position: absolute;
  bottom: 0px;
  padding: 30px 15px;
  display: none;
  line-height: 20px;
}

.member-data {
  text-align: center;
  padding: 30px 15px;
}

.team-image img {
  border-radius: 50%;
  position: relative;
}

.member-data h4 {
  font-size: 16px;
  font-weight: 700;
  /*	text-transform: uppercase; */
  margin-bottom: 8px;
}

.member-data span {
  font-family: var(--theme-body-font);
  font-size: 14px;
  font-weight: 400;
}

.socal-icon ul {
  margin: 0 auto;
  display: inline-block;
}

.socal-icon ul li {
  float: left;
  margin-right: 5px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border: 1px solid transparent;
}

.socal-icon ul li a {
  line-height: 35px;
}

.socal-icon ul li:hover {
  background-color: transparent !important;
}

/*	08.	Join us Section
================================================================*/
.join-btn {
  line-height: 125px;
}

/*	09.	Price Table Section
================================================================*/
.price {
  font-size: 16px;
}

.price-list ul li {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 30px;
}

/*	10.	Video Section
================================================================*/
.video h4 {
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.video .flaticon-play-button::before {
  color: #90D4F1;
  font-size: 70px;
  width: 80px;
  height: 80px;
  text-align: center;
  margin: 0 auto;
  padding-top: 30px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}

.video-popup {
  max-width: 680px;
  display: block;
  margin: 0 auto;
  height: 100%;
  position: relative;
  background: url(../images/fancybox/fancybox_loading.gif) no-repeat;
  background-position: center center;
}

.video {
  z-index: 1;
}

/* popup css */

.YouTubePopUp-Wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 9999999999999;
}

.YouTubePopUp-animation {
  opacity: 0;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: YouTubePopUp;
  animation-name: YouTubePopUp;
}

@-webkit-keyframes YouTubePopUp {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes YouTubePopUp {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.YouTubePopUp-Content {
  max-width: 680px;
  display: block;
  margin: 0 auto;
  height: 100%;
  position: relative;
}

.YouTubePopUp-Content iframe {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  height: 480px !important;
  border: none !important;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.YouTubePopUp-Hide {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: YouTubePopUpHide;
  animation-name: YouTubePopUpHide;
}

@-webkit-keyframes YouTubePopUpHide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes YouTubePopUpHide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.YouTubePopUp-Close {
  position: absolute;
  top: 0;
  cursor: pointer;
  bottom: 528px;
  right: 0px;
  margin: auto 0;
  width: 24px;
  height: 24px;
  background: url(../images/close-white.png) no-repeat;
  background-size: 24px 24px;
  -webkit-background-size: 24px 24px;
  -moz-background-size: 24px 24px;
  -o-background-size: 24px 24px;
}

.YouTubePopUp-Close:hover {
  opacity: 0.5;
}

/*	11.	Blog Section
================================================================*/
.blog-data {
  position: relative;
}

.blog-widget .date {
  position: absolute;
  top: -25px;
  left: 50%;
}

.blog-title {
  font-weight: 600;
}

.blog-info span .fa {
  padding-right: 15px;
}

/*	12.	Testimonial Section
================================================================*/
.avater {
  width: 90px;
  height: 90px;
  display: block;
  margin: 0 auto;
}

.testimonial-item .client {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.star ul li {
  float: left;
  margin-right: 5px;
}

.owl-carousel button.owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid;
  position: relative;
}

.owl-dots {
  text-align: center;
}

.owl-carousel button.owl-dot.active span:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: -4px;
  left: -4px;
  border-radius: 100%;
  border: 2px solid;
}

/*	13.	Map and Contact section
================================================================*/
#map {
  height: 720px;
  background-size: cover;
  background-image: url(/images/mapa.png);
  background-repeat: no-repeat;
  background-position-x: center;

}

.form-control,
select {
  font-family: var(--theme-body-font);
  display: block;
  width: 100%;
  height: auto;
  font-size: 14px;
  line-height: 24px;
  background-image: none;
  border-radius: 0px;
  box-shadow: none;
}

select {
  padding: 0.375rem 0.500rem;
}

label {
  text-transform: capitalize;
}

.form-group {
  margin-bottom: 30px;
}

.form-control:focus {
  box-shadow: none;
}

#success,
#error {
  display: none;
  line-height: 34px
}

.error {
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
  width: 100%;
}

/*	14.	Contact info
================================================================*/
.contact-icon {
  width: 50px;
  height: 50px;
  font-size: 22px;
  line-height: 50px;
  text-align: center;
  float: left;
  margin-right: 15px;
}

/*	15.	Scroll Top
================================================================*/
#scroll {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  display: none;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  z-index: 9999
}

#scroll span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
}

#scroll:hover {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}
#container-buttons {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
}

#messenger-button, #whatsapp-button, #waze-button {
  cursor: pointer;
  margin: 5px;
  width: 50px;
  height: 50px;
  font-size: 25px;
  color: white;
  display: none;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  z-index: 9999
}

#messenger-button i, #whatsapp-button i, #waze-button i {
  display: flex;
  justify-content: center;
  padding-top: 3px; 
  border: 8px solid transparent;
}

/*	16.	Resarvation Form
================================================================*/
.modal-content {
  border-radius: 0px;
}

.modal strong {
  font-size: 16px;
}

.input-group-text {
  border-radius: 0px;
}

/*	17.	Banner
================================================================*/
.Breadcrumb {
  margin: 0 auto;
  display: table;
}

.Breadcrumb li {
  float: left;
  padding: 0px 5px;
}

/*	18.	Sidebar
================================================================*/
.categories li {
  padding: 10px 0px;
  border-bottom: 1px solid transparent;
}

.categories li:last-child {
  border-bottom: none
}

.categories li:first-child {
  padding-top: 0px;
}

.latest-post img {
  float: left;
  width: 70px;
  height: auto;
  margin-right: 15px;
  display: table-cell;
}

.blog-info li {
  float: left;
}

.blog-info li:last-child {
  float: right;
}

.blog-info li a .fa {
  padding-right: 5px;
}

.latest-post {
  display: inline-block;
  padding-bottom: 15px;
}

.post-title {
  display: block;
  margin-bottom: 5px;
}

.tags a {
  margin: 0px 1px 4px 0px;
}

/*	19.	Single Post
================================================================*/
blockquote {
  padding-left: 30px;
  font-size: 14px;
  font-style: italic;
  border-left: none;
  padding: 0px 30px;
  margin-bottom: 30px;
}

.single-post blockquote p {
  border-left: 5px solid transparent;
  padding: 30px 15px;
}

.share-icon ul li {
  float: left;
  font-size: 16px;
  font-weight: bold;
  padding-left: 15px;
}

.comment-avater {
  width: 80px;
  height: 80px;
  float: left;
}

.comment-area {
  display: table;
  padding-left: 30px;
}

.user-title {
  float: left;
  margin-right: 20px;
}

.comment-area p {
  display: inline-block;
}

/*	20.	Responsive Media Queries Css
================================================================*/
/*
// Large devices (desktops, 992px and up)
============================================================*/
@media (max-width: 1199px) {
  .navbar-light .navbar-toggler {
    background-color: #fff;
    border-color: #fff;
  }

  .team-widget {
    border-radius: 165px 165px 0px 0px;
  }

  .blog-widget .date {
    padding: 5px 20px !important
  }

  .background-1 {
    background: url(../images/joinus.jpg) no-repeat left center / cover;
    width: 100%;
  }

  .mt-r50 {
    margin-top: 50px;
  }
}

/*
// Medium devices (tablets, 768px and up)
================================================================*/
@media (max-width: 991px) {
  h2 {
    font-size: 21px;
    line-height: 36px;
  }

  .sub-title {
    width: 100% !important;
  }

  .text-area .btn-black {
    margin-right: 5px !important;
  }

  .filters ul li {
    margin: 0px 6px;
  }

  .contact-info {
    margin-bottom: 15px;
  }

  .blog-info span {
    margin-right: 5px !important;
  }
}

/*
// Small devices (landscape phones, 576px and up)
============================================================*/
@media (max-width: 767px) {
  .team-widget {
    border-radius: 190px 190px 0px 0px;
  }
}

/*
// Extra small devices (portrait phones, less than 576px)
============================================================*/
@media (max-width: 650px) {
  .team-widget {
    border-radius: 253px 253px 0px 0px;
  }

  .sidebar-widget {
    padding: 20px !important
  }

  .blog-info .text-muted {
    font-size: 13px
  }

  .ls-nav-prev,
  .ls-nav-next {
    display: none !important;
  }
}

/*	21.	Color Settings
=============================================================*/
.on-panel .fa {
  font-size: 26px;
  margin: 0 auto;
  display: table;
  padding: 9px 0;
}

/*	22.	Default Animation Css
=============================================================*/
.btn-gradient {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.team-widget:hover .member-data {
  transition: all 10ms ease-out;
  -moz-transition: all 10ms ease-out;
  -ms-transition: all 10ms ease-out;
  -o-transition: all 10ms ease-out;
  -webkit-transition: all 10ms ease-out;
}

a,
.btn,
.service-widget,
.team-widget,
.inner-title,
.service-widget .service-image img,
.service-widget:hover .service-image img,
.socal-icon ul li,
.blog-image img,
.blog-widget:hover .blog-image img,
.blog-title,
.blog-widget {
  transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
}

.navbar-light .navbar-nav .nav-link:before {
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
}

.team-widget:hover,
.team-widget:hover .team-image .teamimg-overlay {
  transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}


.default-portfolio-item .overlay-box {
  -webkit-transition: all 400ms ease-out;
  -ms-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  -moz-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
}

.default-portfolio-item .overlay-box,
.navbar-light .navbar-nav .nav-link:before {
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
}

.service-widget .service-image img,
.blog-image img,
.navbar-light .navbar-nav .nav-link.active:before {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.default-portfolio-item:hover .overlay-box {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  transform: scale(1, 1);
}

.service-widget:hover .service-image img,
.blog-widget:hover .blog-image img {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

.service-iconprice .ser-icon,
.service-iconprice .ser-price,
.team-image .member-data {
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.blog-widget .date {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.blog-widget,
.team-widget {
  -webkit-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.10);
  -moz-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.10);
  -ms-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.10);
  -o-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.10);
  box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.10);
}

.blog-widget:hover,
.team-widget:hover {
  -webkit-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.20);
  -moz-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.20);
  -ms-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.20);
  -o-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.20);
  box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.20);
}

/*	23.	Loader Css
=================================================================*/
.page-load {
  width: 100%;
  overflow-x: hidden
}

.preloader {
  background: var(--primary-theme-color);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.loader-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: #fff;
}

.cssload-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78.284271247462px;
  height: 78.284271247462px;
  margin-left: -39.142135623731px;
  margin-top: -39.142135623731px;
  border-radius: 100%;
  animation-name: cssload-loader;
  -o-animation-name: cssload-loader;
  -ms-animation-name: cssload-loader;
  -webkit-animation-name: cssload-loader;
  -moz-animation-name: cssload-loader;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-duration: 2.4s;
  -o-animation-duration: 2.4s;
  -ms-animation-duration: 2.4s;
  -webkit-animation-duration: 2.4s;
  -moz-animation-duration: 2.4s;
}

.cssload-loader .cssload-side {
  display: block;
  width: 10px;
  height: 33px;
  background-color: var(--primary-theme-color);
  margin: 3px;
  position: absolute;
  border-radius: 50%;
  animation-duration: 0.895s;
  -o-animation-duration: 0.895s;
  -ms-animation-duration: 0.895s;
  -webkit-animation-duration: 0.895s;
  -moz-animation-duration: 0.895s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-timing-function: ease;
  -o-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
}

.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  animation-name: cssload-rotate0;
  -o-animation-name: cssload-rotate0;
  -ms-animation-name: cssload-rotate0;
  -webkit-animation-name: cssload-rotate0;
  -moz-animation-name: cssload-rotate0;
}

.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
  transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  animation-name: cssload-rotate90;
  -o-animation-name: cssload-rotate90;
  -ms-animation-name: cssload-rotate90;
  -webkit-animation-name: cssload-rotate90;
  -moz-animation-name: cssload-rotate90;
}

.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  animation-name: cssload-rotate45;
  -o-animation-name: cssload-rotate45;
  -ms-animation-name: cssload-rotate45;
  -webkit-animation-name: cssload-rotate45;
  -moz-animation-name: cssload-rotate45;
}

.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
  transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  animation-name: cssload-rotate135;
  -o-animation-name: cssload-rotate135;
  -ms-animation-name: cssload-rotate135;
  -webkit-animation-name: cssload-rotate135;
  -moz-animation-name: cssload-rotate135;
}

.cssload-loader .cssload-side:nth-child(1) {
  top: 39.142135623731px;
  left: 78.284271247462px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(2) {
  top: 67.213203431093px;
  left: 67.213203431093px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(3) {
  top: 78.284271247462px;
  left: 39.142135623731px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(4) {
  top: 67.213203431093px;
  left: 11.071067816369px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(5) {
  top: 39.142135623731px;
  left: 0px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(6) {
  top: 11.071067816369px;
  left: 11.071067816369px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(7) {
  top: 0px;
  left: 39.142135623731px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

.cssload-loader .cssload-side:nth-child(8) {
  top: 11.071067816369px;
  left: 67.213203431093px;
  margin-left: -5px;
  margin-top: -16px;
  animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

@keyframes cssload-rotate0 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  60% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@-webkit-keyframes cssload-rotate0 {
  0% {
    -webkit-transform: rotate(0deg);
  }

  60% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes cssload-rotate90 {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transform: rotate(90deg);
  }

  60% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@-webkit-keyframes cssload-rotate90 {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  60% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes cssload-rotate45 {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform: rotate(45deg);
  }

  60% {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    transform: rotate(225deg);
  }

  100% {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    transform: rotate(225deg);
  }
}

@-webkit-keyframes cssload-rotate45 {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  60% {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }

  100% {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
}

@keyframes cssload-rotate135 {
  0% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transform: rotate(135deg);
  }

  60% {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    transform: rotate(315deg);
  }

  100% {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    transform: rotate(315deg);
  }
}

@-webkit-keyframes cssload-rotate135 {
  0% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  60% {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }

  100% {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
  }
}

@keyframes cssload-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin-right {
  from {
    transform: rotate(0deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(180deg);
    opacity: 1.0;
  }

  to {
    transform: rotate(360deg);
    opacity: 0.2;
  }
}

@-moz-keyframes spin-right {
  from {
    -moz-transform: rotate(0deg);
    opacity: 0.2;
  }

  50% {
    -moz-transform: rotate(180deg);
    opacity: 1.0;
  }

  to {
    -moz-transform: rotate(360deg);
    opacity: 0.2;
  }
}

@-webkit-keyframes spin-right {
  from {
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }

  50% {
    -webkit-transform: rotate(180deg);
    opacity: 1.0;
  }

  to {
    -webkit-transform: rotate(360deg);
    opacity: 0.2;
  }
}

@keyframes spin-left {
  from {
    transform: rotate(0deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(-180deg);
    opacity: 1.0;
  }

  to {
    transform: rotate(-360deg);
    opacity: 0.2;
  }
}

@-moz-keyframes spin-left {
  from {
    -moz-transform: rotate(0deg);
    opacity: 0.2;
  }

  50% {
    -moz-transform: rotate(-180deg);
    opacity: 1.0;
  }

  to {
    -moz-transform: rotate(-360deg);
    opacity: 0.2;
  }
}

@-webkit-keyframes spin-left {
  from {
    -webkit-transform: rotate(0deg);
    opacity: 0.2;
  }

  50% {
    -webkit-transform: rotate(-180deg);
    opacity: 1.0;
  }

  to {
    -webkit-transform: rotate(-360deg);
    opacity: 0.2;
  }
}

@keyframes spin-pulse {
  from {
    transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px rgba(0, 61, 76, 0.9);
  }

  50% {
    transform: rotate(145deg);
    opacity: 1;
  }

  to {
    transform: rotate(-320deg);
    opacity: 0;
  }
}

@-moz-keyframes spin-pulse {
  from {
    -moz-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px rgba(0, 61, 76, 0.9);
  }

  50% {
    -moz-transform: rotate(145deg);
    opacity: 1;
  }

  to {
    -moz-transform: rotate(-320deg);
    opacity: 0;
  }
}

@-webkit-keyframes spin-pulse {
  from {
    -webkit-transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px rgba(0, 61, 76, 0.9);
  }

  50% {
    -webkit-transform: rotate(145deg);
    opacity: 1;
  }

  to {
    -webkit-transform: rotate(-320deg);
    opacity: 0;
  }
}

@keyframes pulse {
  from {
    transform: scale(1.2);
    opacity: 1;
  }

  to {
    transform: scale(0.7);
    opacity: 0.1;
  }
}

@-moz-keyframes pulse {
  from {
    -moz-transform: scale(1.2);
    opacity: 1;
  }

  to {
    -moz-transform: scale(0.7);
    opacity: 0.1;
  }
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.2);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.7);
    opacity: 0.1;
  }
}

@keyframes ball-circlex {
  from {
    transform: translateX(0px);
  }

  25% {
    transform: translateX(25px);
    animation-timing-function: ease-in;
  }

  50% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(-25px);
    animation-timing-function: ease-in;
  }

  to {
    transform: translateX(0px);
  }
}

@-moz-keyframes ball-circlex {
  from {
    -moz-transform: translateX(0px);
  }

  25% {
    -moz-transform: translateX(25px);
    -moz-animation-timing-function: ease-in;
  }

  50% {
    -moz-transform: translateX(0px);
  }

  75% {
    -moz-transform: translateX(-25px);
    -moz-animation-timing-function: ease-in;
  }

  to {
    -moz-transform: translateX(0px);
  }
}

@-webkit-keyframes ball-circlex {
  from {
    -webkit-transform: translateX(0px);
  }

  25% {
    -webkit-transform: translateX(25px);
    -webkit-animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translateX(0px);
  }

  75% {
    -webkit-transform: translateX(-25px);
    -webkit-animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: translateX(0px);
  }
}

@keyframes facebook-pulse {
  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #bac5db;
  }

  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  40% {
    margin-top: 3px;
    height: 26px;
  }

  50% {
    margin-top: 5px;
    height: 22px;
  }

  60% {
    margin-top: 6px;
    height: 18px;
  }
}

@-moz-keyframes facebook-pulse {
  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #bac5db;
  }

  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  40% {
    margin-top: 3px;
    height: 26px;
  }

  50% {
    margin-top: 5px;
    height: 22px;
  }

  60% {
    margin-top: 6px;
    height: 18px;
  }
}

@-webkit-keyframes facebook-pulse {
  10% {
    margin-top: 5px;
    height: 22px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  20% {
    margin-top: 0px;
    height: 32px;
    border-color: #d1d7e2;
    background-color: #bac5db;
  }

  30% {
    margin-top: 1px;
    height: 30px;
    border-color: #d1d8e6;
    background-color: #bac5db;
  }

  40% {
    margin-top: 3px;
    height: 26px;
  }

  50% {
    margin-top: 5px;
    height: 22px;
  }

  60% {
    margin-top: 6px;
    height: 18px;
  }
}

@keyframes loadpulse-ball {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@-moz-keyframes loadpulse-ball {
  from {
    -moz-transform: scale(0);
  }

  to {
    -moz-transform: scale(1);
  }
}

@-webkit-keyframes loadpulse-ball {
  from {
    -webkit-transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
  }
}

@keyframes loadpulse-glow {
  from {
    transform: scale(0);
    opacity: 0;
  }

  10% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.75);
    opacity: 0;
  }

  to {
    transform: scale(0);
    opacity: 0;
  }
}

@-moz-keyframes loadpulse-glow {
  from {
    -moz-transform: scale(0);
    opacity: 0;
  }

  10% {
    -moz-transform: scale(1);
    opacity: 0.5;
  }

  50% {
    -moz-transform: scale(1.75);
    opacity: 0;
  }

  to {
    -moz-transform: scale(0);
    opacity: 0;
  }
}

@-webkit-keyframes loadpulse-glow {
  from {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  10% {
    -webkit-transform: scale(1);
    opacity: 0.5;
  }

  50% {
    -webkit-transform: scale(1.75);
    opacity: 0;
  }

  to {
    -webkit-transform: scale(0);
    opacity: 0;
  }
}

@keyframes pound {
  to {
    transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45);
  }
}

@-moz-keyframes pound {
  to {
    -moz-transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45);
  }
}

@-webkit-keyframes pound {
  to {
    -webkit-transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45);
  }
}

@keyframes letters {
  to {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  }
}

@-moz-keyframes letters {
  to {
    text-shadow: 0 0 2px rgba(204, 208, 212, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes letters {
  to {
    text-shadow: 0 0 2px rgba(22, 22, 22, 0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
  }
}