Hi Harihara,
Did you check our documentation for quickstart installing ? Did you clear Quix Caches after installing quickstart package ?
Thank you
Ok, please go to template folder -> quix -> elements -> person -> view.php
replace whole code with
<?php
$classes = classNames( "qx-element qx-element-{$type} {$field['class']}", $visibilityClasses, [
'qx-text-left' => $field['alignment'] === 'left',
'qx-text-center' => $field['alignment'] === 'center',
'qx-text-right' => $field['alignment'] === 'right',
"wow {$field['animation']}" => $field['animation'],
"qx-hvr-{$field['hover_animation']}" => $field['hover_animation']
]);
// Animation delay
$animation_delay = '';
if( $field['animation'] AND array_key_exists('animation_delay', $field) ){
$animation_delay = 'data-wow-delay="'. $field['animation_delay'] .'s"';
}
?>
<div id="<?php echo $id;?>" class="<?php echo $classes?>" <?php echo $animation_delay; ?>>
<div class="team-box-layout1 mb-30 masked1">
<?php if($field['image']):?>
<img class="qx-img-responsive <?php echo $field['image_style']?>" src="<?php echo $field['image']?>" alt="<?php echo $field['name']?>">
<?php endif;?>
<div class="item-title">
<h3><?php echo $field['name']?></h3>
<?php if($field['position']):?>
<span><?php echo $field['position']?></span>
<?php endif;?>
</div>
<div class="item-content d-flex align-items-center">
<div class="item-content-inner">
<h3><?php echo $field['name']?></h3>
<?php if($field['position']):?>
<span><?php echo $field['position']?></span>
<?php endif;?>
<?php if($field['description']):?>
<p><?php echo $field['description']?></p>
<?php endif;?>
</div>
</div>
</div>
</div>
<!-- qx-element-person -->
save and recheck.
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
Done bro 🙂
Note: If you are using old berrykids template version, please download the newest version via customer area and reinstall it.
NOTE: If you are using old berrykids template, please go to template folder -> delete QUIX folder then reinstall the newest version, nothing change or lost :), Quix 1.9.0 released with whole style change so you need to delete old quix elements via template folder.
Thanks
Hi Rita,
Are you able to fix the issue with LOG folder ? Let me know when you done, I will update quix and template domino latest version for you.
Thanks
Sure, just open template folder => css => custom.css add
#sp-header:after {
background-color: red;
}
just replace red with your background color. Do you need to change the color for menu items for new header background?
Thanks
“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.
Quix itself does not allow you remove social icon, but you can disable the output by overriding the person element. Which template are you using ?
Thanks
