• Skip to the primary navigation.
  • Skip to the content.
WarpTheme
  • 0 items
  • Home
  • Joomla!
    • Extra Add-ons
    • All Templates
  • WordPress
  • Dev Packages
  • Account
    • Account Dashboard
    • Contact us
    • Documentation
  • Support
Menu

Antique template

Home › Forums › Support › Antique template

Tagged: antique, header, logo

aeon
Posted 6 years, 10 months ago

hello,

I have 3 questions:

1. How can I change the header to appear solid instead of transparent at all times? (scrolled out or not). By default the header is transparent and turns visible only when scrolling down.

2. How can I remove the transition animation of the header? I would like to remove the fade effect and make the header just be there static at all times, since the “flashing” doesn’t look good when I want to have a visible header at all times.

3. How can I make the Logo have the same size at all times? By default: When scrolling down the Logo changes it’s size, it becomes smaller.

Any help on this would be appreciated 🙂

  • This topic was modified 55 years ago by .
Brian
Posted 6 years, 10 months ago

“1. How can I change the header to appear solid instead of transparent at all times? (scrolled out or not). By default the header is transparent and turns visible only when scrolling down.”
Do you mean disable the transparent?

“2. How can I remove the transition animation of the header? I would like to remove the fade effect and make the header just be there static at all times, since the “flashing” doesn’t look good when I want to have a visible header at all times.”
Related to the first question, “smooth” when switching from transparent to color header. We can remove transparent and disable animation when scrolling. Is it okay?

“3. How can I make the Logo have the same size at all times? By default: When scrolling down the Logo changes it’s size, it becomes smaller.”
Sure, just let me know what you want for question 1+2, I will provide the file to suite your needs.

aeon
Posted 6 years, 10 months ago
This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.
Brian
Posted 6 years, 10 months ago

Hi Aeon,

First: to remove transparent header, go to Menus => Hidden Menu => Home default menu item => tab Page Display then remove page class “transparent-header”

Second: to remove animation, img small when scrolling for logo, go to template folder then open theme.less file, replace all code with the code below

/**
* @package Helix Framework
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2015 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

/*=======================================*
*======= 	TABLE OF CONTENT	 ========*
*=======================================*

01. Base Style
01. Button & Input
03. Top Bar
04. Header
05. Page Title
06. body innerwrapper
07. Page Builder Addons
08. Module
09. Login Form
10. Search
11. Blog
12. Bottom
13. Footer
14. Comingsoon
15. Error page
16. Mixed CSS

=======================================*/

/*=========================================
*======= 	 Start Base Style	   ============
*=======================================*/
a {
	-webkit-transition: color 400ms, background-color 400ms;
	transition: color 400ms, background-color 400ms;
}

body {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a,
a:hover,
a:focus,
a:active {
	text-decoration: none;
	outline: none;
}

label {
	font-weight: normal;
}

legend {
	padding-bottom: 10px;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1,h2,h3,h4,h5,h6,ul,ol{
    margin: 0;
}
ol,ul{
    list-style-type: none;
}
li{
    padding: 0;
}
h2,h3{
    color: #ffffff;
    letter-spacing: 1px;
    font-weight: 500;
}
p {
    font-size: 14px;
    line-height: 23px;
    color: #cccccc;
}
img{
    border: none;
    width: auto;
    height: auto;
}
.light-header {
	h2,h3{
    color: #333333;
    letter-spacing: 1px;
    font-weight: 500;
}
p{
    font-size: 14px;
    line-height: 23px;
    color: #555555;
}
.btn{
	width: 150px;
	font-size: 13px;
	line-height: 45px;
	color: #ffffff;
	font-weight: 400;
	background-color: #333333;
	border: none;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 0;
	position: relative;
	z-index: 2;
	&:hover, &:focus, &:active {
		color: #fff !important;
	}
}
.btn:focus,
.btn:hover{
    background-color: #333333;
    color: #ffffff;
}

#sp-bottom,
#sp-footer {
	border-top: 0;
}
span.sp-copyright {
    color: #fff;
}
h2.qx-title, h3.qx-media-heading a {
color: #333333 !important;
}
.qx-nc-title {
    color: #fff !important;
}
.offcanvas-menu {
  background-color: #fff !important;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
	.sp-module {
		background: #fff !important;
	}
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a {
    color: #454758;
		border-bottom: 0;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li:hover >a, .offcanvas-menu .offcanvas-inner .sp-module ul > li.active >a {
	background: transparent !important;
}
.offcanvas-menu .offcanvas-inner .search input {
    border: 1px solid #999 !important;
}
}
.fullscreen-container {
    z-index: 1;
}
/*End Base Style
*=======================================*/

.form-links ul li {
	display: inline-block;
	margin-right: 5px;
}
/*=========================================
*======= 	 Start Button	   ============
*=======================================*/
.btn,
.sppb-btn {
	.transition(~'color 400ms, background-color 400ms, border-color 400ms');
	width: 150px;
	font-size: 13px;
	line-height: 45px;
	color: #323232;
	font-weight: 400;
	background-color: #ffffff;
	border: none;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 0;
	position: relative;
	z-index: 2;
}
.btn:focus,
.btn:hover{
    background-color: #ffffff;
    color: #323232;
}

.banner h5{
    text-align: center;
}

.banner .hvr-trim:before{
    border-color: #555555;
}

button[type="submit"], input[type="submit"] {
	outline: none !important;
}
/*-- trim hover effect on button --*/
.hvr-trim {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    -moz-transform: perspective(1px) translateZ(0);
    -ms-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-box-shadow: 0 0 1px transparent;
    -moz-box-shadow: 0 0 1px transparent;
    -ms-box-shadow: 0 0 1px transparent;
    box-shadow: 0 0 1px transparent;
    position: relative;
}
.hvr-trim:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.hvr-trim:hover:before,
.hvr-trim:focus:before,
.hvr-trim:active:before {
    opacity: 1;
}
.section_header{
    margin-bottom: 50px;
    text-align: center;
}
.section_header h2{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 1px;
    position: relative;
}
.section_header h2::after{
    content: " ";
    display: block;
    width: 50px;
    height: 2px;
    position: absolute;
    left: ~"calc(50% - 25px)";
    bottom: -18px;
}
.section_header h2+p{
    margin: 0 auto 30px;
    max-width: 800px;
}

.owl-dots{
    margin: 40px 0 0!important;
}
.sppb-lead {
    font-weight: 500;
}
//Offline
.offline-inner {
	margin-top: 100px;
}

//input
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	.form-control();
	height: 40px;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.group-control {
	select,
	textarea,
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	.uneditable-input {
		width: 100%;
	}
}
/*End Button
*=======================================*/

/* ****************   START Common   ****************** */
/* **************************************************** */

// go to top
.scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 62px;
    right: 100px;
    display: none;
    z-index: 999;
    border: 1px solid #ddd;
    background-color: rgba(255,255,255,.4);
    &:hover{
        background-color: darken(#ddd, 10%);
    }
    &:before{
        content: " \f106";
        font-family: "FontAwesome";
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 3px;
        width: 40px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        color: #000;
    }
}

/* *****************   END:: Common  ****************** */
/* **************************************************** */
/*=========================================
*======= 	Start  Top Bar	   ============
*=======================================*/
#sp-top-bar {
	padding: 8px 0;
	.sp-module {
		display: inline-block;
		margin: 0 0 0 20px;
	}
}

ul.social-icons {
	list-style: none;
	padding: 0;
	margin: -5px;
	display: inline-block;
	>li {
		display: inline-block;
		margin: 4px 7px;
		a {
			color: #999999;
		}
	}
}
#sp-social-menu ul.social-icons {
  line-height: 70px;
}

// language switcher
.sp-module-content {
	.mod-languages {
		ul.lang-inline {
			margin: 0;
			padding: 0;

			li {
				border: none;
				display: inline-block;
				margin: 0 5px 0 0;

				a {
					padding: 0 !important;
				}

				>a:before {
					display: none;
				}
			}
		}
	}
}

.sp-contact-info {
	float: right;
	list-style: none;
	padding: 0;
	margin: 0 -10px;
	li {
		display: inline-block;
		margin: 0 10px;
		font-size: 90%;

		i{
			margin: 0 3px;
		}
	}
}
/* End  Top Bar
*=======================================*/

/*=========================================
*======= 	Start  Header	   ============
*=======================================*/
//sticky header
.sticky-wrapper{
    position: relative;
    z-index: 99;
}

//header
.transparent-header, .light-header {
	#sp-header{
		position: absolute;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 70px;
		background: rgba(255,255,255,0);
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-ms-transition: all .5s;
		transition: all .5s;
		.logo {
			display: inline-block;
			height: 70px;
			display: table;
			margin: 0;
			a {
				font-size: 24px;
				line-height: 1;
				margin: 0;
				padding: 0;
				display: table-cell;
				vertical-align: middle;
				img {
					width: 159px;
				}
			}
			p {
				margin: 5px 0 0;
			}
		}
		.sp-retina-logo {
			display: none;
		}
	}

}
.default-header {
	#sp-header{
		background: rgba(60,60,60,1);
	}
}
#sp-header{
	top: 0;
	z-index: 999;
	width: 100%;
	height: 70px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	background: rgba(60,60,60,1);
	.logo {
		display: inline-block;
		height: 70px;
		display: table;
		margin: 0;
		a {
			font-size: 24px;
			line-height: 1;
			margin: 0;
			padding: 0;
			display: table-cell;
			vertical-align: middle;
			img {
				width: 159px;
			}
		}
		p {
			margin: 5px 0 0;
		}
	}
	.sp-retina-logo {
		display: none;
	}
}

.transparent-header{
	.sp-megamenu-parent >li >a{
		color: #fff;
	}
	.menu-fixed .sp-megamenu-parent >li >a{
		color: #d3d3d3;
	}
}
.light-header {
	#sp-header {
		.sp-megamenu-parent >li >a {
			color: #fff !important;
		}
		#offcanvas-toggler >i {
			color: #fff !important;
		}
		#sp-social-menu ul.social-icons a {
			color: #fff !important;
		}
	}
}
.light-header {
	#sp-header.menu-fixed-out {
		.sp-megamenu-parent >li >a,
		#offcanvas-toggler >i {
			color: #fff !important;
		}
		#sp-social-menu ul.social-icons a {
			color: #fff !important;
		}
	}
	#sp-header.menu-fixed{
		position: fixed;
		width: 100%;
		height: 70px;
		z-index: 9999;
		padding: 0;
		background-color: rgba(255,255,255,1);
		-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.10);
		-moz-box-shadow: 0 1px 5px rgba(0,0,0,.10);
		-ms-box-shadow: 0 1px 5px rgba(0,0,0,.10);
		box-shadow: 0 1px 5px rgba(0,0,0,.10);
		-webkit-animation: fadeInDown .4s;
		animation: fadeInDown .4s;
		#sp-social-menu ul.social-icons a {
			color: #999;
		}
		.sp-megamenu-parent >li >a,
		#offcanvas-toggler >i {
			color: #333 !important;
		}
		#sp-social-menu ul.social-icons a {
			color: #333 !important;
		}
	}
	.sp-megamenu-parent >li >a,
	#offcanvas-toggler >i {
		color: #333 !important;
	}
}
#sp-header.menu-fixed{
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 9999;
	padding: 0;
	background: rgba(60,60,60,1);
	-webkit-animation: fadeInDown .4s;
	animation: fadeInDown .4s;

}

/* End  Header
*=======================================*/
//Slidershow
.tp-dottedoverlay {
    content: "";
    position: absolute;
    background-color: rgba(40,40,40,.7) !important;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.tp-dottedoverlay.twoxtwo {
   background: none;
}

/*=========================================
*======= 	Start  Page Title   ============
*=======================================*/
#sp-title {
	min-height: 0;
}

.sp-page-title {
	padding: 30px 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: fixed;
	h2,h3 {
		margin: 0;
		padding: 0;
		color: #fff;
	}

	h2 {
		font-size: 24px;
		line-height: 1;
	}

	h3 {
		font-size: 14px;
		font-weight: normal;
		line-height: 1;
		margin-top: 10px;
	}

	.breadcrumb {
		background: none;
		padding: 0;
		margin: 10px 0 0 0;
		>.active {
			color: rgba(255, 255, 255, 0.8);
		}

		>span,
		>li,
		>li+li:before,
		>li>a {
			color: #fff;
		}
	}
}
/* Start  Page Title
*=======================================*/

/*=========================================
*===  Start body innerwrapper	 =====
*=======================================*/
.body-innerwrapper{
	overflow-x: hidden;
	.transition(.4s);
}

.layout-boxed .body-innerwrapper {
	max-width: 1240px;
	margin: 0 auto;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.layout-boxed {
  .qx-section--stretch {
    width: 100% !important;
    margin-left: 0 !important;
}
}
#sp-main-body {
  padding: 50px 0;
}

.com-sppagebuilder #sp-main-body {
  padding: 0;
}
.com-quix #sp-main-body {
  padding: 0;
}
.no-padding {
  .qx-container-fluid {
    padding: 0;
  }
}
.no-padding-column {
  .qx-column {
    padding: 0;
  }
  .qx-g-items .qx-fg-item {
      margin: 0;
      padding: 0;
  }
}
.no-margin {
  .qx-element-blurb {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.align-items-center {
    -webkit-box-align: center!important;
    -webkit-align-items: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
}
/* End body innerwrapper
*=======================================*/

/*=========================================
*===  Start Page Builder Addons	 =====
*=======================================*/
.sppb-addon-cta {
	.sppb-cta-subtitle{
		margin-bottom: 0;
		line-height: 26px !important;
	}
	.sppb-btn-lg {
		margin-top: 30px;
	}

}

//Image content addon
.sppb-addon-image-content {
	position: relative;
	.sppb-image-holder {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		background-position: 50%;
		background-size: cover;
	}

	&.aligment-left {
		.sppb-image-holder {
			left: 0;
		}

		.sppb-content-holder {
			padding: 120px 0 120px 50px;
		}
	}

	&.aligment-right {
		.sppb-image-holder {
			right: 0;
		}

		.sppb-content-holder {
			padding: 120px 50px 120px 0;
		}
	}

}

@media (max-width: @screen-sm-min) {
	.sppb-addon-image-content {
		.sppb-image-holder {
			position: inherit;
			width: 100% !important;
			height: 300px;
		}
	}
}

/* End Page Builder Addons
*=======================================*/

/*=========================================
*======= 	Start  Module	   ============
*=======================================*/
.sp-module {
	margin-top: 50px;
	&:first-child {
		margin-top: 0;
	}
	.sp-module-title {
		margin: 0 0 20px;
		font-size: 14px;
		text-transform: uppercase;
		line-height: 1;
	}

	//Un-ordered List
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		>li {
			display: block;
			border-bottom: 1px solid #555555;
			-webkit-transition: 300ms;
			transition: 300ms;
			>a {
				display: block;
				padding: 5px 0;
				line-height: 36px;
				padding: 2px 0;
				-webkit-transition: 300ms;
				transition: 300ms;

				&:hover {
					background: none;
				}

				&:before {
					font-family: FontAwesome;
					content: "\f105";
					margin-right: 8px;
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	//List category
	.categories-module {
		ul {
			margin: 0 10px;
		}
	}

	//Latest News
	.latestnews {
		>div {
			padding-bottom: 5px;
			margin-bottom: 5px;
			border-bottom: 1px solid #555555;

			&:last-child {
				padding-bottom: 0;
				margin-bottom: 0;
				border-bottom: 0;
			}
			>a {
				display: block;
				font-weight: 400;
			}
		}
	}

	//Tags Cloud
	.tagscloud {
		margin: -2px 0;
		.tag-name {
			display: inline-block;
			padding: 5px 10px;
			background: #808080;
			color: #fff;
			border-radius: 4px;
			margin: 2px 0;

			span {
				display: inline-block;
				min-width: 10px;
				padding: 3px 7px;
				font-size: 12px;
				font-weight: 700;
				line-height: 1;
				text-align: center;
				white-space: nowrap;
				vertical-align: baseline;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 10px;
			}
		}
	}
}
/* End  Module
*=======================================*/

/*=========================================
*======= 	Start  Login Form	 =========
*=======================================*/
.login {

	img {
		display: inline-block;
		margin: 20px 0;
	}

	.checkbox {
		input[type="checkbox"] {
			margin-top: 6px;
		}
	}
}

.form-links{
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
}
/* End  Login Form
*=======================================*/

/*=========================================
*======= 	Start  Search	   ============
*=======================================*/
.search {
	.btn-toolbar {
		margin-bottom: 20px;
		span.icon-search {
			margin: 0;
		}
		button {
			color: #fff;
		}
	}

	.phrases {
		.phrases-box {
			.controls{
				label {
					display: inline-block;
					margin: 0 20px 20px;
				}
			}
		}

		.ordering-box {
			margin-bottom: 15px;
		}
	}

	.only {
		label {
			display: inline-block;
			margin: 0 20px 20px;
		}
	}

	.search-results {

		dt.result-title {
			margin-top: 40px;
		}
		dt,dd {
			margin: 5px 0;
		}
	}
}

.filter-search {
	.chzn-container-single {
		.chzn-single {
			height:34px;
			line-height:34px;
		}
	}
}

.form-search {
	.finder {
		label {
			display: block;
		}

		.input-medium {
			width: 60%;
			border-radius: 4px;
		}
	}
}

.finder {
	.word {
		input {
			display: inline-block;
		}
	}

	.search-results.list-striped {
		li {
			padding: 20px 0;
		}
	}
}

/* End  Search
*=======================================*/
.com-users #sp-main-body {
  background: #ebebeb;
}
.view-profile #sp-main-body,
.view-registration #sp-main-body,
.view-login #sp-main-body {
  padding: 60px 0;
}
.view-profile #sp-main-body .alert,
.view-registration #sp-main-body .alert,
.view-login #sp-main-body .alert {
  margin-bottom: 80px;
}
.view-profile #sp-main-body .alert.alert-error,
.view-registration #sp-main-body .alert.alert-error,
.view-login #sp-main-body .alert.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.view-profile #sp-main-body .alert.alert-message,
.view-registration #sp-main-body .alert.alert-message,
.view-login #sp-main-body .alert.alert-message {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.com-users .reg-login-form-wrap {
  background: #fff;
  position: relative;
  padding: 45px;
}
.com-users .reg-login-form-wrap div.login-logo a {
  display: table;
}
.com-users .reg-login-form-wrap .reg-login-title h3 {
  font-weight: 600;
  color: #000;
  margin-top: 0;
  margin-bottom: 58px;
}
.com-users .reg-login-form-wrap .form-validate input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 20px;
  background: #E8ECF1;
}
.com-users .reg-login-form-wrap .registration,
.com-users .reg-login-form-wrap .login {
  margin-bottom: 45px;
}
.com-users .reg-login-form-wrap .registration .form-group,
.com-users .reg-login-form-wrap .login .form-group {
  margin-bottom: 24px;
  text-align: left;
}
.com-users .reg-login-form-wrap .registration .form-group .btn-primary.btn-block,
.com-users .reg-login-form-wrap .login .form-group .btn-primary.btn-block {
  display: inline-block;
  width: auto;
  margin-top: 15px;
}
.com-users .reg-login-form-wrap .registration .form-group p,
.com-users .reg-login-form-wrap .login .form-group p {
  color: #000;
  font-weight: 600;
}
.com-users .reg-login-form-wrap .registration {
  margin-bottom: 0;
}
.com-users .reg-login-form-wrap .registration >p {
  margin-bottom: 0;
  text-align: left;
}
.com-users .reg-login-form-wrap .registration .form-validate .form-group .btn.btn-primary {
  margin-top: 20px;
  margin-bottom: 22px;
}
.view-remind form#user-registration, .reset form#user-registration {
    background: #fff;
    position: relative;
    padding: 45px 95px;
    border: 1px solid #EEEEEE;
}
.view-remind form#user-registration >p, .reset form#user-registration >p {
    margin-bottom: 30px;
    color: #333;
}
.com-users .reg-login-form-wrap .form-links {
  text-align: left;
  a {
    font-weight: 300;
  }
}
.com-users.view-login .logout {
  text-align: center;
  padding: 100px 0;
  background-color: #fff;
}

.com-users.view-login .logout .btn.btn-primary:hover,
.com-users.view-login .logout .btn.btn-primary:focus {
  color: #fff;
}
/*=========================================
*======= 	Start  Blog	   ============
*=======================================*/
.article-info {
	margin: 0 -8px 5px;
	line-height: 12px;
	>dd{
		display: inline-block;
		font-size: 12px;
		color: #666;
		text-transform: uppercase;
		margin: 0 8px;
		>i {
			display: inline-block;
			margin-right: 3px;
		}
	}
}

article {
	&.item {
		margin-bottom: 50px;
	}
}

.tags {
	margin-top: 20px;
	>span {
		text-transform: uppercase;
		letter-spacing: 2px;
	}
}

//Article Voting
.content_rating,
.content_rating + form {
	display: none;
}

.voting-symbol{
	unicode-bidi: bidi-override;
	direction: rtl;
	font-size: 14px;
	display: inline-block;

	span.star {
		font-family: "FontAwesome";
		font-weight: normal;
		font-style: normal;
		display: inline-block;

		&.active:before{
			content: "\f005";
		}

		&:before{
			content: "\f006";
			padding-right: 5px;
		}

	}
}

.sp-rating {
	span.star:hover:before,
	span.star:hover ~ span.star:before {
		content: "\f005";
		cursor: pointer;
	}
}

.post_rating {
	margin-bottom: 20px;
	.ajax-loader,
	.voting-result {
		display: none;
	}
}

.post-format {
	position: absolute;
	top: 0;
	left: -68px;
	display: block;
	width: 48px;
	height: 48px;
	font-size: 24px;
	line-height: 48px;
	text-align: center;
	color: #fff;
	border-radius: 3px;
}

.entry-image,
.entry-gallery,
.entry-video,
.entry-audio,
.entry-link {
	margin-bottom: 30px;
}

.entry-status,
.entry-quote {
	margin-bottom: 50px;
}

.entry-header {
	position: relative;
	margin-bottom: 30px;
	&.has-post-format {
		margin-left: 68px;
	}

	h2 {
		margin: 8px 0 0;
		font-size: 24px;
		line-height: 1;
		a {
			font-size: 14px;
	    line-height: 20px;
	    color: #999999;
	    text-transform: uppercase !important;
	    font-weight: 400;
	    letter-spacing: 1px;
		}
	}
}

.entry-link {
	padding: 100px 50px;
	position: relative;
	z-index: 1;

	a {
		h4 {
			margin: 0;
			font-size: 36px;
			color: #fff;
			&:hover {
				color:rgba(255, 255, 255, 0.85);
			}
		}
	}

	&:before {
		position: absolute;
		left: -60px;
		font-size: 300px;
		content: "\f0c1";
		font-family: FontAwesome;
		transform: rotate(90deg);
		top: -75px;
		color: rgba(255, 255, 255, 0.15);
		z-index: -1;
	}
}

.entry-quote {
	position: relative;
	padding: 80px 50px;
	color:rgba(255, 255, 255, 0.9);

	&:before {
		position: absolute;
		left: -40px;
		font-size: 300px;
		content: "\f10e";
		font-family: FontAwesome;
		transform: rotate(15deg);
		top: -75px;
		color: rgba(255,255,255,0.15);

	}

	blockquote small {
		color: #FFF;
		font-weight: 600;
		font-size: 20px;
	}

	blockquote {
		padding: 0;
		margin: 0;
		font-size: 16px;
		border: none;
	}
}

.carousel-left, .carousel-right {
    position: absolute;
    top: 50%;
    font-size: 24px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin-top: -18px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    -webkit-transition: 400ms;
    transition: 400ms;
    &:hover {
        color: #fff;
    }
    &:focus {
        color: #fff;
    }
}

.carousel-left {
    left: 20px;
}

.carousel-right {
    right: 20px;
}

.newsfeed-category {
	.category {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			padding: 5px 0;
		}
	}

	#filter-search {
		margin: 10px 0;
	}
}

.category-module,
.categories-module,
.archive-module,
.latestnews,
.newsflash-horiz,
.mostread,
.form-links,
.list-striped {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		padding: 2px 0;

		h4 {
			margin: 5px 0;
		}
	}
}
//Social and rating
.article-footer-top{
    display: table;
    clear: both;
    width: 100%;
    .post_rating{
        float: left;
    }
}

.helix-social-share{
    float: right;
    .helix-social-share-icon{
        ul{
            padding: 0;
            list-style: none;
            margin: 0;
            li{
                margin-right: 7px;
                display: inline-block;
                div{
                    display: block;
                    a{
                        background: #f5f5f5 none repeat scroll 0 0;
                        border-radius: 50%;
                        height: 30px;
                        padding-top: 4px;
                        text-align: center;
                        width: 30px;
                        display: inline-block;
                        &:hover,
                            &:focus{
                            background: @major_color;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
/* End  Blog
*=======================================*/

/*=========================================
*======= 	Start  Bottom	   ============
*=======================================*/
#sp-bottom {
	background-color: #222222;
	border-top: 1px solid #404040;
	.sp-module {
		background: rgba(0,0,0,0);
		.sp-module-title {
			font-size: 16px;
			line-height: 1.5;
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 20px;
		}
	}
	.sp-module-content {
		font-size: 13px;
		line-height: 30px;
		color: #888888;
		font-weight: 300;
		letter-spacing: 1px;
		padding-right: 20px;
		i.fa {
			width: 20px;
			height: 21px;
			font-size: 12px;
			line-height: 21px;
			color: #ffffff;
			background-color: #666666;
			text-align: center;
			margin-right: 20px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-ms-border-radius: 3px;
			border-radius: 3px;
		}
	}
	.sp-module ul >li {
		border-bottom: none;
		a {
			line-height: 26px !important;
		}
	}
	.sp-module ul >li >a:before {
		display: none;
	}
}
/* End  Bottom
*=======================================*/

/*=========================================
*======= 	Start  Footer	   ============
*=======================================*/
#sp-footer {
	color: #fff;
	text-align: center;
	padding: 20px 0;
	background-color: #1b1b1b;
	border-top: 1px solid #2c2c2c;
	a {
		color: rgba(255, 255, 255, 0.9);
		&:hover {
			color: #fff;
		}
	}
}
span.sp-copyright {
    font-size: 10px;
    line-height: 1;
    color: #888888;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#sp-footer-wrapper {
	ul {
		display:inline-block;
		&.nav {
			display:inline-block;
			list-style:none;
			padding:0;
			margin:0 5px;
			li {
				display:inline-block;
				margin:0 5px;
				a {
					display:block;
					&:hover{
						background:none;
					}
				}
			}
		}
	}

	.helix-framework {
		display:inline-block;

		.helix-logo {
			display:block;
			width:130px;
			height:40px;
			text-indent:-9999px;
			background:url(../images/helix-logo-white.png) no-repeat 0 0;
		}
	}

	.copyright {
		display:block;
	}
}
/* End  Footer
*=======================================*/
/* ***************   START Comingsoon   *************** */
/* **************************************************** */

.sp-comingsoon {
    width: 100%;
    height: 100%;
    min-height: 100%;
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        color: #fff;
    }
    ul.social-icons {
      float: none;
    }
    #sp-comingsoon{
        padding: 100px 0;
    }
    .sp-comingsoon-wrap.has-background{
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        position: relative;
        &:before {
          left: 0;
          top: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          content: "";
          background: rgb(48, 49, 51);
          opacity: .95;
          filter: alpha(opacity=95);
        }
        .container {
          position: relative;
          z-index: 9999;
        }
    }
    .comingsoon-page-logo{
        text-align: center;
        img{
            display: inline-block;
						border: 2px solid #555555;
    				padding: 10px;
        }
        .sp-retina-logo{
            display: none;
        }
    }
    .sp-comingsoon-title {
        margin-top: 130px;
        font-size: 42px;
        margin-bottom: 10px;
        font-weight: 700;
        color: #fff;
    }
    .sp-comingsoon-content {
        font-size: 28px;
        font-weight: 300;
    }
    .days, .hours, .minutes, .seconds {
        display: inline-block;
        margin: 80px 15px;
    }
    .days .number, .hours .number, .seconds .number, .minutes .number {
      height: 120px;
      line-height: 120px;
      border: 1px solid #fff;
      display: inline-block;
      font-size: 48px;
      font-weight: bold;
      background-color: rgba(255, 255, 255, 0.1);
      font-size: 40px;
      color: #fff;
      width: 120px;
      border: none !important;
      letter-spacing: -1px;
      border-radius: 3px 3px 0 0;
    }
    .days .string, .minutes .string, .seconds .string, .hours .string {
        display: block;
        background-color: #fff;
        color: #666;
        width: 120px;
        border: none !important;
        letter-spacing: -1px;
        border-radius: 0;
        margin-top: -10px !important;
    }
    .social-icons li {
        display: inline-block;
        margin: 0 15px;
        a {
            color: rgba(255, 255, 255, 0.7);
            font-size: 24px;
            background: rgba(0,0,0,0);
            -webkit-transition: color 400ms;
            transition: color 400ms;
            &:hover {
                color: #fff;
            }
        }
    }
}

/* ***************   END:: Comingsoon  **************** */
/* **************************************************** */

/* **************   START Error Page   **************** */
/* **************************************************** */

.error-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
    }
    .error-page-inner {
        &.has-background{
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .error-logo-wrap{
            text-align: center;
            margin-bottom: 30px;
            img{
                display: inline-block;
								border: 2px solid #555555;
    						padding: 10px;
            }
        }
        height: 100%;
        min-height: 100%;
        width: 100%;
        display: table;
        text-align: center;
        >div {
            display: table-cell;
            vertical-align: middle;
						background: #292929;
        }
    }
    .fa-exclamation-triangle {
        font-size: 64px;
        line-height: 1;
        margin-bottom: 10px;
    }
    .error-code {
        font-weight: bold;
        font-size: 96px;
        line-height: 1;
        margin: 0 0 10px 0;
        padding: 0;
				color: #999;
    }
    .error-message {
        font-size: 24px;
        line-height: 1;
        margin-bottom: 30px;
    }
}

/* ***************   END:: Error Page   *************** */
/* **************************************************** */

//Ratina Logo
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    #sp-header {
        .sp-default-logo {
            display: none;
        }
        .sp-retina-logo {
            display: block;
        }
    }
		.transparent-header #sp-header {
			.sp-default-logo {
					display: none;
			}
			.sp-retina-logo {
					display: block;
			}
		}
		.light-header #sp-header {
			.sp-default-logo {
					display: none;
			}
			.sp-retina-logo {
					display: block;
			}
		}
    .sp-comingsoon {
        .comingsoon-page-logo{
            .sp-retina-logo{
                display: table;
                margin: 0 auto;
            }
            .sp-default-logo{
                display: none;
            }
        }
    }
}

/*=========================================
*======= 	Start  Mixed CSS   ==========
*=======================================*/
.sp-social-share {
	ul{
		display: block;
		padding: 0;
		margin: 20px -5px 0;

		li{
			display: inline-block;
			font-size: 24px;
			margin: 0 5px;
		}
	}
}

// profile
.dl-horizontal {
	dt {
		margin: 8px 0;
		text-align: left;
	}
}

// page-header
.page-header {
	padding-bottom: 15px;
}

// featured contact
table.category {

	width: 100%;
	thead,
	tbody{
		>tr {
			border: 1px solid #f2f2f2;
			th,td {
				padding: 10px;
			}
		}
	}
}

//contact from
.contact-form {
	.form-actions {
		background: none;
		border: none;
	}
}

@media print {
	.visible-print {
		display: inherit !important;
	}
	.hidden-print {
		display: none !important;
	}
}
.sp-simpleportfolio .sp-simpleportfolio-meta {
    width: 100%;
    float: left;
    padding-left: 0;
}
.sp-simpleportfolio .sp-simpleportfolio-description {
    width: 100%;
    float: left;
}
// sp portfolio
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{
	display: block;
	font-size: 16px;
	line-height: 28px;
	height: 48px;
	text-transform: uppercase;
	border: 1px solid #ddd;
	border-radius: 40px;
	padding: 10px 25px;
	min-width: 170px;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
	&:hover {
		color: #fff;
	}
}
 @media only screen and (max-width: 480px) {
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li {
    margin-bottom: 15px;
}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {
    display: block;
    font-size: 16px;
    line-height: 30px !important;
    height: 40px !important;
    text-transform: capitalize !important;
    border: 1px solid #ddd;
    border-radius: 5px !important;
    padding: 5px 25px !important;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
}

#bg-overlay:before {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(60,60,60,.95);
}
#bg-overlay {
	position: relative;
	.sppb-section-title.sppb-text-center {
		position: relative;
	}
}

.layout-blog, .view-article {
	background: #292929;
}
.sp-module {
	background: #323232;
	padding: 30px;
	border-radius: 3px;
	margin-top: 50px;
	position: relative;
}
.view-category,
.view-article{
	.item{
		padding: 20px;
		background-color: #323232;
		.entry-intro-text{
			margin-top: 30px;
		}
		img{
			width: 100%;
		}
		.entry-header{
			.article-info{
				margin-bottom: 30px;
				&.article-list-bottom{
					margin-bottom: 0;
					margin-top: 30px;
				}
				dd.category-name{
					padding: 5px 20px;
					background: @major_color;
					color: #fff;
					a{
						text-transform: uppercase;
						color: #fff;
						font-size: 14px;
						font-weight: 100;
					}
				}
			}
			h2{
				margin: 0;
				line-height: 36px;
				font-size: 30px;
				a{
					text-transform: capitalize;
				}
			}
		}

		.tags{
			span{
				text-transform: capitalize;
			}
			a.label-info{
				font-size: 14px;
				background-color: #c3c4c7;
				color: #fff;
				padding: 5px 10px;
			}
		}
	}
	//Right Side Bar
	.blog-add-right{
		padding: 0;
		background: 0;
		&:after{
			display: none;
		}
	}
	//Tag Cloud
	.tag-cloud{
		h3.sp-module-title{
			font-size: 20px;
			color: #4b4b4b;
			text-transform: capitalize;
		}
		.tagspopular{
			ul{
				li{
					display: inline-block;
					border-bottom: 0;
					margin-bottom: 10px;
					a{
						background-color: #c3c4c7;
						color: #fff;
						padding: 0 10px;
						border-radius: 3px;
						.transition(400ms);
						&:before{
							display: none;
						}
						&:hover{
							color: #fff;
						}
					}
				}
			}
		}
	}
	//Popular-post
	.popular-post{
		h3.sp-module-title{
			font-size: 20px;
			color: #4b4b4b;
			text-transform: capitalize;
		}
		.latestnews > div{
			display: table;
			.article-list-img{
				display: table-cell;
				vertical-align: middle;
				width: 50px;
			}
			> a {
				display: table-cell;
				vertical-align: middle;
				padding-left: 15px;
				line-height: 20px;
			}
		}
	}
	//Bottom add
	.blog-bottom-ad{
		padding: 0;
		background: 0;
		&:after{
			display: none;
		}
	}
}
.post_rating {
    margin-bottom: 20px;
    color: #999;
}
.article-info {
	line-height: 12px;
	>dd{
		display: inline-block;
		font-size: 16px;
		color: #999;
		text-transform: capitalize;
		.dt-separator{
			text-transform: lowercase;
		}
		>i {
			display: inline-block;
			margin-right: 3px;
		}
	}
}

article {
	&.item {
		margin-bottom: 50px;
	}
}

.tags {
	margin-top: 20px;
	>span {
		text-transform: uppercase;
		letter-spacing: 2px;
	}
}
@media (max-width: 767px) {
	.post-format {
		display: none;
	}
}
.light-header {
	.sp_quickcontact select,
	.sp_quickcontact textarea,
	.sp_quickcontact input[type="text"],
	.sp_quickcontact input[type="password"],
	.sp_quickcontact input[type="datetime"],
	.sp_quickcontact input[type="datetime-local"],
	.sp_quickcontact input[type="date"],
	.sp_quickcontact input[type="month"],
	.sp_quickcontact input[type="time"],
	.sp_quickcontact input[type="week"],
	.sp_quickcontact input[type="number"],
	.sp_quickcontact input[type="email"],
	.sp_quickcontact input[type="url"],
	.sp_quickcontact input[type="search"],
	.sp_quickcontact input[type="tel"],
	.sp_quickcontact input[type="color"],
	.sp_quickcontact .uneditable-input {
		display: block;
		width: 100%;
		background-color: #fff;
		border-radius: 0;
		border: 1px solid #ccc;
		box-shadow: none;
		padding: 15px;
		font-size: 13px!;
		line-height: 13px;
		color: #999;
		height: 45px;
		margin-bottom: 20px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	}
	.contact_info h3 {
		color: #666666;
	}
	.contact_info h4 {
		color: #666666;
	}
	.contact_info .fa {
		color: #666666;
	}
}
.sp_quickcontact select,
.sp_quickcontact textarea,
.sp_quickcontact input[type="text"],
.sp_quickcontact input[type="password"],
.sp_quickcontact input[type="datetime"],
.sp_quickcontact input[type="datetime-local"],
.sp_quickcontact input[type="date"],
.sp_quickcontact input[type="month"],
.sp_quickcontact input[type="time"],
.sp_quickcontact input[type="week"],
.sp_quickcontact input[type="number"],
.sp_quickcontact input[type="email"],
.sp_quickcontact input[type="url"],
.sp_quickcontact input[type="search"],
.sp_quickcontact input[type="tel"],
.sp_quickcontact input[type="color"],
.sp_quickcontact .uneditable-input {
	display: block;
	width: 100%;
	background-color: #292929;
	border-radius: 0;
	border: 1px solid #555555;
	box-shadow: none;
	padding: 15px;
	font-size: 13px!;
	line-height: 13px;
	color: #cccccc;
	height: 45px;
	margin-bottom: 20px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.sp_quickcontact .form_area {
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	margin-bottom: 80px;
}
.sp_quickcontact textarea#message {
	width: 100%;
	min-height: 150px;
}
.sp_quickcontact label {
	font-weight: normal;
	font-size: 12px;
	line-height: 20px;
	color: #999999;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 1px;
}
.sp_quickcontact .btn {
	line-height: 45px !important;
}
.contact_info{
    text-align: center;
}
.contact_info .col-sm-4:not(:last-child){
    border-right: 1px solid #cccccc;
}
.contact_info .fa{
    font-size: 20px;
    line-height: 1;
    color: #cccccc;
    margin-bottom: 15px;
}
.contact_info h4{
    font-size: 13px;
    line-height: 1;
    color: #cccccc;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 15px;
}
.contact_info h3{
    font-size: 13px;
    line-height: 1;
    color: #cccccc;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.contact_info h3 a{
    color: #cccccc;
    text-decoration: none;
    -webkit-transition: color .3s;
    -moz-transition: color .3s;
    -ms-transition: color .3s;
    transition: color .3s;
}
.contact_info h3 a:hover,
.contact_info h3 a:focus{
    color: #ffffff;
}
/* End  Mixed CSS
*=======================================*/
/*-- about_us css
======================================== --*/

.about_us .col-sm-6{
    margin-bottom: 60px;
}
.about_us .top_part{
    margin-bottom: 30px;
}
.about_us .img_container{
    width: 70px;
    height: 70px;
    float: left;
    padding: 10px;
    margin-top: 10px;
}
.about_us .inner_container{
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.about_us .inner_container{
    background: url(../images/love.png) center center no-repeat;
}
.about_us .col-sm-6:nth-of-type(2) .inner_container{
    background: url(../images/link.png) center center no-repeat;
}
.about_us .top_part h3{
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    float: left;
    padding-left: 20px;
}
.about_us .top_part h3 span{
    font-size: 16px;
    line-height: 2;
    color: #7e7e7e;
    font-weight: 400;
    text-transform: capitalize;
    display: block;
}

/*-- mission css
======================================== --*/

.mission .col-sm-8,
.mission .col-sm-4{
    margin-bottom: 50px;
}
.mission .top_part{
    padding: 0;
    margin-bottom: 25px;
}
.mission .txt_container{
    padding: 0 20px;
}
.mission h3{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 500;
}
.mission h3 strong{
    font-weight: 500;
}
.mission h5{
    font-size: 20px;
    line-height: 30px;
    color: #888888;
    font-weight: 400;
    padding-top: 5px;
}
.mission p{
    margin-bottom: 20px;
}
.mission .btn{
    margin: 10px 0 20px;
}
.mission .content{
    position: relative;
}
.mission .img_container{
    overflow: hidden;
}
.mission img{
    width: 100%;
    -webkit-transition: transform .8s;
    -moz-transition: transform .8s;
    -ms-transition: transform .8s;
    transition: transform .8s;
}
.mission img:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.mission .border{
    width: 160px;
    height: 200px;
    position: absolute;
    top:-20px;
    left: 50%;
    background-color: transparent;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*-- services css
======================================== --*/

.services .content{
    background-color: #323232;
    padding: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.services .content img{
    width: 55px;
    height: 55px;
		background: url(../images/icon_group.png) no-repeat;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: 10px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.services .content .icon1{
    background-position: 0 -50px;
}
.services .content .icon2{
    background-position: -220px -55px;
}
.services .content .icon3{
    background-position: -165px -55px;
}
.services .content .icon4{
    background-position: -55px -55px;
}
.services .content .icon5{
    background-position: -110px -55px;
}
.services .content .icon6{
    background-position: -275px -55px;
}
.services .content:hover .icon1{
    background-position: 0 0;
}
.services .content:hover .icon2{
    background-position: -220px 0;
}
.services .content:hover .icon3{
    background-position: -165px 0;
}
.services .content:hover .icon4{
    background-position: -55px 0;
}
.services .content:hover .icon5{
    background-position: -110px 0;
}
.services .content:hover .icon6{
    background-position: -275px 0;
}
.services .content:hover img{
    background-color: #555555;
}
.services .content h3{
    font-size: 18px;
    line-height: 1.5;
    text-transform: capitalize;
    margin-bottom: 5px;
    font-weight: 400;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
}
.services .content:hover{
    -webkit-box-shadow: 0 2px 20px rgba(0,0,0,.15);
    -moz-box-shadow: 0 2px 20px rgba(0,0,0,.15);
    -ms-box-shadow: 0 2px 20px rgba(0,0,0,.15);
    box-shadow: 0 2px 20px rgba(0,0,0,.15);
}

.light-header {
	.services .content:hover {
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.15);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.15);
    -ms-box-shadow: 0 2px 10px rgba(0,0,0,.15);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.services .content {
	background-color: #ffffff;
    padding: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
}
/*-- portfolio css
======================================== --*/

.portfolio .owl-item img{
    display: block;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
}
.portfolio .item{
    position: relative;
    cursor: move;
    overflow: hidden;
}
.portfolio .item .overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(17,17,17,.95);
    border: 15px solid #555555;
    text-align: center;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
    opacity: 0;
}
.portfolio .item .overlay h5{
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: #999999;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.portfolio .item:hover .overlay h5{
    -webkit-animation: moveUp .5s ease;
    -moz-animation: moveUp .5s ease;
    -ms-animation: moveUp .5s ease;
    animation: moveUp .5s ease;
}
.portfolio .item:hover img{
    transform: scale(1.1);
}
.portfolio .item:hover .overlay{
    opacity: 1;
}

/*-- 9.counter_up css
======================================== --*/

.counter_up .counter{
    font-size: 46px;
    line-height: 2;
    font-weight: 800;
    margin: 0 auto 25px;
    cursor: pointer;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
    position: relative;
}
.counter_up .counter::after{
    content: " ";
    display: block;
    width: 30px;
    height: 1px;
    background-color: #999999;
    position: absolute;
    bottom: 0;
    left: ~"calc(50% - 15px)";
}
.counter_up h4{
    font-size: 14px;
    line-height: 1.5;
    color: #999999;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

/*-- team css
======================================== --*/
.team .content{
    margin: 15px 0;
    overflow: hidden;
    position: relative;
}
.team .content img{
    margin: 0 auto;
}
.team .content.transp,
.team .content.transp{
    border: none;
    background: transparent;
}
.team .content:not(.transp) .overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(17,17,17,.95);
    border: 15px solid #555555;
    opacity: 0;
    text-align: center;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
    cursor: pointer;
}
.team .inner{
    width: 100%;
    position: absolute;
    letter-spacing: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.team .content.transp .overlay,
.team .content.transp .overlay{
    background: transparent;
}
.team .content:not(.transp):hover .overlay{
    opacity: 1;
}
.team .content h3{
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.team .content p{
    text-transform: capitalize;
}
.team ul li a{
    font-size: 14px;
    color: #555555;
}
.team .content:not(.transp) .inner{
    height: 100%;
}
.team .content:not(.transp) h3{
    width: 100%;
    position: absolute;
    top: 30%;
    left: 0;
    text-align: center;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.team .content:not(.transp) p{
    width: 100%;
    position: absolute;
    top: 45%;
    left: 0;
    text-align: center;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.team .content:not(.transp) ul{
    width: 100%;
    position: absolute;
    top: 60%;
    left: 0;
    text-align: center;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.team .content:not(.transp):hover h3{
    -webkit-animation: moveDown .5s ease;
    -moz-animation: moveDown .5s ease;
    -ms-animation: moveDown .5s ease;
    animation: moveDown .5s ease;
}
.team .content:not(.transp):hover p,
.team .content:not(.transp):hover ul,
.team .content:not(.transp):hover .social-links{
    -webkit-animation: moveUp .5s ease;
    -moz-animation: moveUp .5s ease;
    -ms-animation: moveUp .5s ease;
    animation: moveUp .5s ease;
}
.team .content:not(.transp) .social-links {
    width: 100%;
    position: absolute;
    top: 60%;
    left: 0;
    text-align: center;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.top-40 {
	position: absolute;
	margin-top: 40%;
	.qx-title {
     margin-bottom: 5px !important;
	}
}
/*-- skills css
======================================== --*/

.skills h3{
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}
.skills .quote p{
    line-height: 27px;
    margin-bottom: 20px;
}
.progress{
    height: 5px;
}
.progress-bar{
    height: 5px;
}
.progress-element p{
    font-weight: 400;
    text-transform: capitalize;
}
.progress-element p span{
    float: right;
}
.sign{
    margin: 30px 0 80px;
}
.partner_logos{
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #444444;
}
.partner_logos .owl-dots{
    display: none;
}
.light-header {
	.partner_logos {
    border-top: 1px solid #eeeeee;
}
}
/*-- feedback css
======================================== --*/

.feedback .row{
    position: relative;
    padding-top: 20px;
}
.feedback .pivot{
    width: 100px;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    padding: 40px 0;
}
.feedback .pivot img{
    border-radius: 50%;
    border: 1px solid #cccccc;
}
.feedback .pivot::after{
    content: "";
    width: 5px;
    height: 100%;
    background-color: #555555;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -50;
}
.feedback .row:nth-of-type(3) .pivot::after{
    height: 170px;
}
.feedback .person,
.feedback .comment{
    margin-right: 50px;
    margin-bottom: 40px;
}
.feedback .comment{
    margin: 20px 0 40px 60px;
    background-color: #444444;
    padding: 23px 25px;
    position: relative;
}
.feedback .comment::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 10px solid #444444;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    position: absolute;
    left: -10px;
    top: 30px;
}
.feedback .row:nth-of-type(2) .comment::after{
    position: absolute;
    top: 30;
    left: auto;
    right: -10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.feedback .row:nth-of-type(2) .person{
    margin-left: 50px;
}
.feedback .row:nth-of-type(2) .person h3{
    text-align: left;
}
.feedback .row:nth-of-type(2) .comment{
    margin: 20px 60px 40px 0;
}
.feedback h2.section_title span{
    margin-bottom: 40px;
}
.feedback .comment p{
    line-height: 30px;
    margin: 0;
}
.feedback .person h3{
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 40px;
}
.feedback .person h3 span{
    display: block;
    font-size: 13px;
    color: #999999;
    text-transform: capitalize;
    margin-top: 0;
    letter-spacing: 1px;
}
@media screen and (max-width: 767px){
    .feedback .row{
        padding: 0;
    }
    .feedback .pivot{
        position: static !important;
        -webkit-transform: translateX(0) !important;
        -moz-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
        padding: 0 0 20px !important;
    }
    .feedback .pivot::after{
        display: none;
    }
    .feedback .person{
        margin: 0 0 20px!important;
    }
    .feedback .comment{
        margin: 0 0 50px!important;
    }
    .feedback h3{
        text-align: center!important;
        margin: 0!important;
    }
    .feedback .pull-right{
        float: none!important;
    }
    .feedback .comment::after{
        -webkit-transform: translateX(-50%) rotate(90deg)!important;
        -moz-transform: translateX(-50%) rotate(90deg)!important;
        -ms-transform: translateX(-50%) rotate(90deg)!important;
        transform: translateX(-50%) rotate(90deg)!important;
        top: -13px!important;
        left: 50%!important;
    }
}
.light-header {
	.feedback .comment {
    background-color: #eeeeee;
}
.feedback .comment::after {
    border-right: 10px solid #eeeeee;
}
.feedback .person h3 span {
    color: #555555;
}
}
/*-- pricing css
============================================--*/

.pricing .price {
    list-style-type: none;
    background-color: #292929;
    border: none;
    margin: 15px 0;
    padding: 20px 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.pricing .price:hover {
    -webkit-box-shadow: 0 8px 12px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 8px 12px 0 rgba(0,0,0,0.1);
    -ms-box-shadow: 0 8px 12px 0 rgba(0,0,0,0.1);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.1);
}
.pricing .price .header {
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 400;
    color: #777777;
    letter-spacing: 2px;
}
.pricing .col-sm-4:nth-of-type(2) .price{
    background-color: #ffffff;
}
.pricing .price li {
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    color: #cccccc;
}
.pricing .price .grey {
    font-size: 36px;
    line-height: 36px;
    color: #ffffff;
    font-weight: 400;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    margin: 0 50px;
}
.pricing .price .grey span{
    font-size: 14px;
    display: block;
    text-transform: uppercase;
}
.pricing .price li:last-child{
    border: none;
}
.pricing .btn{
    background-color: #ffffff;
    color: #323232!important;
}
.pricing .col-sm-4:nth-of-type(2) .price .grey{
    color: #333333;
}
.pricing .col-sm-4:nth-of-type(2) .price li{
    color: #555555;
}
.pricing .col-sm-4:nth-of-type(2) .price .btn{
    background-color: #323232;
    color: #ffffff!important;
}

//Blog
.serviceBox2 .hover-effect{
    margin-bottom: 20px;
    overflow: hidden;
}
.serviceBox2 .hover-effect img{
    width: 100%;
    -webkit-transition: transform .8s;
    -moz-transition: transform .8s;
    -ms-transition: transform .8s;
    transition: transform .8s;
}
.serviceBox2 .hover-effect:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
span.sprocket-strips-s-text {
    font-size: 14px;
    line-height: 23px;
    color: #cccccc;
    margin: 20px 0;
}
.sprocket-strips-s-title {
	margin-top: 0;
	font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	color: #fff;
	a {
		color: #fff;
	}
}
.light-header {
	span.sprocket-strips-s-text {
	    font-size: 14px;
	    line-height: 23px;
	    color: #555555;
	    margin: 20px 0;
	}
	.sprocket-strips-s-title {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #fff;
		a {
			color: #333333;
		}
}
}

/*Equalize columns*/
.sppb-equalize-columns .sppb-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}

.sppb-equalize-columns .sppb-row >div{
  flex: 1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

/*No Gutter*/
.sppb-row.sppb-no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.sppb-row.sppb-no-gutter > [class^="sppb-col-"],
.sppb-row.sppb-no-gutter > [class*="sppb-col-"] {
  padding-left: 0;
  padding-right: 0;
}

//FOR QUIX
.percent-counter {
    float: right;
}
.custom-cta {
	.qx-btn {
		-webkit-transition: color 400ms, background-color 400ms, border-color 400ms;
		-o-transition: color 400ms, background-color 400ms, border-color 400ms;
		transition: color 400ms, background-color 400ms, border-color 400ms;
		width: 150px;
		font-size: 13px;
		line-height: 45px;
		color: #323232;
		font-weight: 400;
		background-color: #ffffff;
		border: none;
		border-radius: 0;
		text-transform: uppercase;
		letter-spacing: 2px;
		padding: 0;
		position: relative;
		z-index: 2;
		float: right;
		&:hover, &:focus, &:active {
			color: #666;
			background-color: #E0E1E2;
		}
	}
}
.qx-element-person .qx-person-img {
    margin: 0;
}

.custom-joomla-articles {
	h3.qx-media-heading a {
	    margin-top: 0;
	    font-size: 13px;
	    line-height: 1.5;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    margin-bottom: 15px;
	    color: #fff;
	}
}

.table-body, .table-heading, .table-footer {
    padding: 20px;
    background: #292929 !important;
}
.single-table {
	list-style-type: none;
    border: none;
    margin: 15px 0;
    padding: 20px 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.table-heading .amount {
    font-size: 45px;
    text-shadow: 0 0 black;
    color: #ffffff;
    font-weight: 400;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #777777;
    margin: 0 50px;
		padding: 20px 0;
		display: block;
}
.table-heading .plantype {
    padding-top: 20px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
		display: block;
}
ul.price li {
    color: #cccccc;
}
.table-heading .title {
    padding: 20px 0;
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 400;
    color: #777777;
    letter-spacing: 2px;
}
.featured:before {
	display: none;
}
.single-table.featured {
	background: #fff;
}
.featured {
	.table-body, .table-heading, .table-footer {
    padding: 20px;
    background: #fff !important;
}
.table-heading .amount {
    color: #333333;
	}
	.table-heading .plantype,
	ul.price li {
    color: #555555;
	}
	.btn {
    background-color: #323232;
    color: #ffffff !important;
}
}

@media only screen and (max-width: 767px) {
	.custom-cta .qx-btn {
		float: left;
	}
	.custom-joomla-articles {
		.serviceBox2 {
			margin-bottom: 30px;
		}
	}
	.contact_info .col-sm-4:not(:last-child) {
    border-right: 0;
		margin-bottom: 30px;
}
.top-40 {
    position: inherit;
    margin-top: 0;
}
}
@media only screen and (max-width: 768px) {
	.custom-joomla-articles {
		.serviceBox2 {
			margin-bottom: 30px;
		}
	}
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
    .single-table {
    width: 293px !important;
}
}
/* **********   START Helix 1.4 Loader Css  *********** */
/* **************************************************** */

/* ************   START Pre-Loader CSS   ************** */
/* **************************************************** */

.sp-pre-loader {
    background: @preloader_bg;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;

    // Clock loader
    .sp-loader-clock {
        border: 3px solid @preloader_tx;
        border-radius: 60px;
        bottom: 0;
        height: 80px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
        &:after{
            content: "";
            position: absolute;
            background-color: @preloader_tx;
            top:2px;
            left: 48%;
            height: 38px;
            width: 4px;
            border-radius: 5px;
            -webkit-transform-origin: 50% 97%;
            transform-origin: 50% 97%;
            -webkit-animation: grdAiguille 2s linear infinite;
            animation: grdAiguille 2s linear infinite;
        }

        &:before{
            content: "";
            position: absolute;
            background-color: @preloader_tx;
            top:6px;
            left: 48%;
            height: 35px;
            width: 4px;
            border-radius: 5px;
            -webkit-transform-origin: 50% 94%;
            transform-origin: 50% 94%;
            -webkit-animation: ptAiguille 12s linear infinite;
            animation: ptAiguille 12s linear infinite;
        }
    }
    // Circle Loader
    .sp-loader-circle{
        position: absolute;
        height: 80px;
        width: 80px;
        border-radius: 80px;
        border: 3px solid fade(@preloader_tx, 70%);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation: loader1 3s linear infinite;
        animation: loader1 3s linear infinite;
        &:after{
            content: "";
            position: absolute;
            top: -5px;
            left: 20px;
            width: 11px;
            height: 11px;
            border-radius: 10px;
            background-color: @preloader_tx;
        }
    }
    // Bubble Loop Loader
    .sp-loader-bubble-loop{
        position: absolute;
        width: 12px;
        height: 12px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 12px;
        background-color: @preloader_tx;
        -webkit-transform-origin:  50% 50%;
        transform-origin:  50% 50% ;
        -webkit-animation: loader6 1s ease-in-out infinite;
        animation: loader6 1s ease-in-out infinite;
        &:before{
            content: "";
            position: absolute;
            background-color: fade(@preloader_tx, 50%);
            top: 0px;
            left: -25px;
            height: 12px;
            width: 12px;
            border-radius: 12px;
        }
        &:after{
            content: "";
            position: absolute;
            background-color: fade(@preloader_tx, 50%);
            top: 0px;
            left: 25px;
            height: 12px;
            width: 12px;
            border-radius: 12px;
        }
    }
    // Circle  Loader Two
    .circle-two {
        bottom: 0;
        height: 100px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
    }
    .circle-two > span,
    .circle-two > span:before,
    .circle-two > span:after {
        content: "";
        display: block;
        border-radius: 50%;
        border: 2px solid @preloader_tx;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .circle-two > span {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-left-color: transparent;
        -webkit-animation: effect-2 2s infinite linear;
        -moz-animation: effect-2 2s infinite linear;
        -ms-animation: effect-2 2s infinite linear;
        -o-animation: effect-2 2s infinite linear;
        animation: effect-2 2s infinite linear;
    }
    .circle-two > span:before {
        width: 75%;
        height: 75%;
        border-right-color: transparent;
    }
    .circle-two > span:after {
        width: 50%;
        height: 50%;
        border-bottom-color: transparent;
    }

    // Audio Wave 2 Loader
    .wave-two-wrap{
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 50%;
        width: 90px;
    }
    .wave-two {
        margin: 0;
        list-style: none;
        width: 90px;
        position: relative;
        padding: 0;
        height: 10px;
    }
    .wave-two li {
        position: absolute;
        width: 2px;
        height: 0;
        background-color: @preloader_tx;
        bottom: 0;
    }

    .wave-two li:nth-child(1) {
        left: 0;
        -webkit-animation: sequence1 1s ease infinite 0;
        animation: sequence1 1s ease infinite 0;
    }
    .wave-two li:nth-child(2) {
        left: 15px;
        -webkit-animation: sequence2 1s ease infinite 0.1s;
        animation: sequence2 1s ease infinite 0.1s;
    }
    .wave-two li:nth-child(3) {
        left: 30px;
        -webkit-animation: sequence1 1s ease-in-out infinite 0.2s;
        animation: sequence1 1s ease-in-out infinite 0.2s;
    }
    .wave-two li:nth-child(4) {
        left: 45px;
        -webkit-animation: sequence2 1s ease-in infinite 0.3s;
        animation: sequence2 1s ease-in infinite 0.3s;
    }
    .wave-two li:nth-child(5) {
        left: 60px;
        -webkit-animation: sequence1 1s ease-in-out infinite 0.4s;
        animation: sequence1 1s ease-in-out infinite 0.4s;
    }
    .wave-two li:nth-child(6) {
        left: 75px;
        -webkit-animation: sequence2 1s ease infinite 0.5s;
        animation: sequence2 1s ease infinite 0.5s;
    }

    // Audio Wave Loader
    .sp-loader-audio-wave {
        width: 3em;
        height: 2em;
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
        animation: audioWave 1.5s linear infinite;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    // Loader With Logo
    .sp-loader-with-logo{
        top: 0;
        left: 0;
        width: 100%;
        height: 105px;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        position: absolute;
        .logo{
            display: inline-block;
            width: auto;
        }
        .line{
            background: @preloader_tx;
            bottom: 0;
            height: 5px;
            left: 0;
            position: absolute;
            top: auto;
        }
    }
}

/* *************   END:: Pre-Loader CSS   ************* */
/* **************************************************** */

/* ************   START Loader Animation   ************ */
/* **************************************************** */

// Clock Loader Animation
@-webkit-keyframes grdAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes grdAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes ptAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes ptAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

// Circle Loader Animation
@-webkit-keyframes loader1{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader1{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

// Bubble Loop Loader Animation
@-webkit-keyframes loader6{
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(180deg);}
    100%{-webkit-transform:rotate(180deg);}
}
@keyframes loader6{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    100%{transform:rotate(180deg);}
}

// Ring Loader Animation
@keyframes rotate-360 {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// Audio Wave Loader Animation
@keyframes audioWave {
    25% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
    }
    37.5% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
    }
    50% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em;
    }
    62.5% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em;
    }
    75% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em;
    }
}

// Circle 2 Loader Animation
@-webkit-keyframes effect-2 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes effect-2 {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// Audio Wave Loader 2 animation
@keyframes sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 50px;
    }
    100% {
        height: 10px;
    }
}
@keyframes sequence2 {
    0% {
        height: 20px;
    }
    50% {
        height: 65px;
    }
    100% {
        height: 20px;
    }
}

@keyframes rot1 {
    100% {
        transform: skew(-10deg) translateX(50px) rotate(405deg);
    }
}
@-webkit-keyframes rot1 {
    100% {
        -webkit-transform: skew(-10deg) translateX(50px) rotate(405deg);
    }
}
@keyframes rot2 {
    100% {
        transform: skew(-10deg) rotate(525deg);
    }
}
@-webkit-keyframes rot2 {
    100% {
        -webkit-transform: skew(-10deg) rotate(525deg);
    }
}
@keyframes rot3 {
    100% {
        transform: skew(-10deg) translateX(20px) translateY(-50px) rotate(645deg);
    }
}
@-webkit-keyframes rot3 {
    100% {
        -webkit-transform: skew(-10deg) translateX(20px) translateY(-50px) rotate(645deg);
    }
}

@keyframes width {
    10% {
        width: 10%;
    }
    20% {
        width: 20%;
    }
    30% {
        width: 30%;
    }
    40% {
        width: 40%;
    }
    50% {
        width: 50%;
    }
    60% {
        width: 60%;
    }
    70% {
        width: 70%;
    }
    80% {
        width: 80%;
    }
    90% {
        width: 90%;
    }
    100% {
        width: 100%;
    }
}

/* ***********   END:: Loader Animation   ************* */
/* **************************************************** */

/* **********   END:: Helix 1.4 Loader Css   ********** */
/* **************************************************** */

/* ************ START Animations Header *************** */
/* **************************************************** */

.animated{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}

@-webkit-keyframes fadeInDown{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,-50%,0);
        transform:translate3d(0,-50%,0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
@keyframes fadeInDown{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,-50%,0);
        transform:translate3d(0,-50%,0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
.fadeInDown{
    -webkit-animation-name:fadeInDown;
    animation-name:fadeInDown;
}

//fadeinUp
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* ************ END:: Animations Header *************** */
/* **************************************************** */

/* *********   START Responsive Media Query   ********* */
/* **************************************************** */
//Tablet
@media screen and (min-width: 768px) and (max-width: 1199px){
    .scrollup {
        bottom: 25px;
        right: 25px;
    }
}
//Mobile Device
@media screen and (min-width: 320px) and (max-width: 767px){
    //Top social
    ul.social-icons {
        margin: 0;
        width: 100%;
        text-align: center;
        > li{
            margin: 5px;
        }
    }
    .sp-contact-info {
        display: table;
        float: none;
        margin: 0;
        text-align: center;
        width: 100%;
        li{
            margin: 0 5px;
            font-size: 89%;
        }
    }
    //Call to action
    .sppb-animated{
        .sppb-addon-cta{
            .sppb-cta-title{
                font-size: 28px !important;
                line-height: 40px !important;
            }
            .sppb-btn-lg{
                font-size: 16px;
            }
        }
    }
    //Back to top
    .scrollup {
        bottom: 25px;
        right: 25px;
    }
    //contact form
    .form-horizontal{
        .control-label{
            width: 100%;
            text-align: left;
        }
        .controls{
            margin: 0;
            width: 100%;
            input, textarea{
                width: 100%;
            }
            textarea{
                height: 131px;
            }
        }
    }
}
@media screen and (min-width: 550px) and (max-width: 767px){
    //top social
    .sp-contact-info li {
        margin: 0 5px;
        font-size: 90%;
    }
}
/* *********   END:: Responsive Media Query   ********* */
/* **************************************************** */

/* ******************   Start Pb3   ******************* */
/* **************************************************** */

//Image Content
@media (min-width: 768px) {
    .sppb-col-sm-offset-6 {
        margin-left: 50%;
    }
}

//Testimonial Pro
.sppb-testimonial-pro .sppb-item img {
    display: inline-block;
    margin-bottom: 10px;
}

/* ******************   End:: Pb3   ******************* */
/* **************************************************** */

save and recheck

aeon
Posted 6 years, 10 months ago

Brian, what can I say…

this worked like a charm!

Thanks for your help, have a great day 🙂

Brian
Posted 6 years, 10 months ago

You’re welcome

You must be logged in to reply to this topic.

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project

WarpTheme

  • Support Policy
  • Terms of Use
  • Privacy Policy
  • Ticket Support (PRO)
  • Contact Us

Resources

  • Documentation
  • WordPress Tutorials
  • Joomla Tutorials
  • Blog
  • Live Demo

Products

  • Joomla Templates
  • Extra SP Page Builder
  • Wordpress Themes
  • Developer Packages
Copyright 2015-2024 WarpTheme.com. All rights reserved.
  • Home
  • Joomla!
    • Extra Add-ons
    • All Templates
  • WordPress
  • Dev Packages
  • Account
    • Account Dashboard
    • Contact us
    • Documentation
  • Support
[Updates] 71+ Joomla templates are updated for Joomla 5.2 and Joomla 4.4.9 Download Now
Hello. Add your message here.