/*-----------------------------------------------------------------------------------
Template Name: Gymnast
Template URL: https://themeforest.net/item/gymnast-gym-fitness-bodybuilding-yoga-and-nutrition-bootstrap-4-template/29543605
Description: GYM, Fitness, Bodybuilding, Yoga and Nutrition Bootstrap 4 Template
Author: Bull-Theme
Author URI: https://themeforest.net/user/bull-theme
Version: 1.0.0
-----------------------------------------------------------------------------------*/
/* ====================== [ Start Typography ] ====================== */
body {
font-family: 'Roboto', sans-serif;
line-height: 1.88;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
}
p:last-child {
margin-bottom: 0;
}
a {
color: inherit;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
a:hover {
text-decoration: none;
color: #FF4500;
}
button:focus {
outline: none;
}
.btn {
border-radius: 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
border-width: 2px;
position: relative;
font-size: 12px;
padding: 14px 44px
}
.btn-link {
padding: 0 0 6px 0;
border: 0;
}
.btn-link:hover {
text-decoration: none;
}
.btn-link:after {
content: '';
border-bottom: 2px solid;
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 20px;
transition: all .3s cubic-bezier(0.77,0,.175,1);
}
.btn-link:hover:after {
width: 100%;
}
.btn-primary {
color: #fff;
background-color: #FF4500;
border-color: #FF4500;
}
.btn-secondary {
color: #fff;
background-color: #1d1d1d;
border-color: #1d1d1d;
}
.btn-lg,
.btn-group-lg > .btn {
border-radius: 0;
font-size: 15px;
padding: 18px 55px;
}
.breadcrumb {
margin: 0;
background-color: transparent;
padding: 0;
}
.small-title {
letter-spacing: 1px;
font-size: 14px;
}
/* ====================== [ End Typography ] ====================== */
/* ====================== [ Start Form ] ====================== */
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0;
}
.form-control {
border-width: 0 0 2px 0;
border-radius: 0;
background-color: transparent;
padding-left: 0;
padding-right: 0;
transition: all .4s;
}
.form-control:focus {
box-shadow: none;
background-color: transparent;
}
.form-control:focus,
.form-control:hover {
border-color: #000;
}
/* ====================== [ End Form ] ====================== */
/* ====================== [ Start Helper Classes ] ====================== */
.bg-dark {
background-color: #1d1d1d !important;
}
.bg-primary {
background-color: #FF4500 !important;
}
.text-primary {
color: #FF4500 !important;
}
.gutters-10 {
margin-right: -5px;
margin-left: -5px;
}
.gutters-10 > .col,
.gutters-10 > [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.section {
padding-top: 100px;
padding-bottom: 100px;
position: relative;
}
.full-home {
min-height: 100vh;
}
.half-home {
min-height: 50vh;
}
/* ====================== [ End Helper Classes ] ====================== */
/* ====================== [ Start Cursor Style ] ====================== */
body {
cursor: none;
}
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visibility: hidden;
}
.cursor-inner {
margin-left: 2px;
margin-top: 2px;
width: 6px;
height: 6px;
z-index: 10000001;
background-color: #FF4500;
-webkit-transition: width .3s ease-in-out,
height .3s ease-in-out,
margin .3s ease-in-out,
opacity .3s ease-in-out;
-o-transition: width .3s ease-in-out,
height .3s ease-in-out,
margin .3s ease-in-out,
opacity .3s ease-in-out;
transition: width .3s ease-in-out,
height .3s ease-in-out,
margin .3s ease-in-out,
opacity .3s ease-in-out;
}
.cursor-inner.cursor-hover {
margin-left: -40px;
margin-top: -40px;
width: 80px;
height: 80px;
background-color: #FF4500;
opacity: .3;
}
.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 40px;
height: 40px;
border: 1px solid #FF4500;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10000000;
opacity: .5;
-webkit-transition: all .08s ease-out;
-o-transition: all .08s ease-out;
transition: all .08s ease-out;
}
.cursor-outer.cursor-hover {
opacity: 0;
}
/* ====================== [ End Cursor Style ] ====================== */
/* ====================== [ Start progress-wrap ] ====================== */
.progress-wrap {
position: fixed;
bottom: 30px;
right: 30px;
height: 44px;
width: 44px;
cursor: pointer;
display: block;
border-radius: 50px;
z-index: 100;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.progress-wrap i {
font-size: 22px;
color: #FF4500;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: #FF4500;
stroke-width: 4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
/* ====================== [ End progress-wrap ] ====================== */
/* ====================== [ Start Section Lines ] ====================== */
.section .vc-bg-lines {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.section .vc-bg-lines span {
background: rgba(0, 0, 0, 0.05);
width: 1px;
height: 100%;
position: absolute;
left: -webkit-calc(100% / 8);
left: calc(100% / 8);
}
.section .vc-bg-lines.light span {
background: rgba(255, 255, 255, 0.08);
}
.section .vc-bg-lines .border-2 {left: -webkit-calc(100% / 8 * 2);left: calc(100% / 8 * 2);}
.section .vc-bg-lines .border-3 {left: -webkit-calc(100% / 8 * 3);left: calc(100% / 8 * 3);}
.section .vc-bg-lines .border-4 {left: -webkit-calc(100% / 8 * 4);left: calc(100% / 8 * 4);}
.section .vc-bg-lines .border-5 {left: -webkit-calc(100% / 8 * 5);left: calc(100% / 8 * 5);}
.section .vc-bg-lines .border-6 {left: -webkit-calc(100% / 8 * 6);left: calc(100% / 8 * 6);}
.section .vc-bg-lines .border-7 {left: -webkit-calc(100% / 8 * 7);left: calc(100% / 8 * 7);}
.section .vc-bg-lines.lines-animate span:after {
position: absolute;
content: '';
width: 4px;
height: 30px;
/* background: #FF4500; */
background: #FF4500;
top: 50%;
left: 50%;
}
.section .vc-bg-lines .border-1:after {
top: 25%;
animation: bounceDot 30s infinite;
}
.section .vc-bg-lines .border-2:after {
top: 75%;
animation: bounceDot 25s infinite;
}
.section .vc-bg-lines .border-3:after {
top: 55%;
animation: bounceDot 20s infinite;
}
.section .vc-bg-lines .border-4:after {
top: 60%;
animation: bounceDot 30s infinite;
}
.section .vc-bg-lines .border-5:after {
top: 30%;
animation: bounceDot 20s infinite;
}
.section .vc-bg-lines .border-6:after {
top: 25%;
animation: bounceDot 30s infinite;
}
.section .vc-bg-lines .border-7:after {
top: 75%;
animation: bounceDot 25s infinite;
}
@keyframes bounceDot {
0% {
top: 10%;
}
50% {
top: 90%;
}
100% {
top: 10%;
}
}
/* ====================== [ End Section Lines ] ====================== */
/* ====================== [ Start Social bar ] ====================== */
.socialbar {
cursor: default;
}
.socialbar a {
background: #282828;
color: #fff;
width: 50px;
height: 50px;
margin: 0px 3px 5px;
border: 1px solid #282828;
-webkit-border-radius: 50px;
border-radius: 50px;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 50px;
font-size: 22px;
display: inline-block;
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
cursor: pointer;
-webkit-transition-property: background-color, border-color, color;
-o-transition-property: background-color, border-color, color;
transition-property: background-color, border-color, color;
}
.socialbar a span {
position: relative;
z-index: 2;
}
.socialbar a:hover {
background: transparent;
color: #282828;
}
.socialbar.squared a {
-webkit-border-radius: 0;
border-radius: 0;
}
.socialbar.outline a {
background: transparent;
border: 1px solid #282828;
color: #282828;
}
.socialbar.outline a:hover {
background: #282828;
color: #ffffff;
}
.socialbar.outline a.social-footer {
border-color: #474a4e;
color: #afafb0;
}
.socialbar.outline a.social-footer:hover {
background: #474a4e;
color: #ffffff;
}
.socialbar.flat a {
background: transparent;
color: #282828;
border-color: transparent;
}
.socialbar.flat a:hover {
background: #282828;
color: #ffffff;
}
.socialbar.flat.outline-hover a:hover {
background: transparent;
border-color: #282828;
color: #282828;
}
.socialbar.inline {
display: block;
}
.socialbar.inline a {
background: none;
width: auto;
height: auto;
border: none;
margin: 0 15px;
-webkit-box-shadow: none;
box-shadow: none;
color: #282828;
line-height: 2.4;
font-size: 13.8px;
font-weight: 700;
font-family: "Poppins", sans-serif;
}
.socialbar.inline a .icon {
font-size: 20px;
margin-right: 5px;
vertical-align: -2px;
}
.socialbar.small a {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.socialbar.small.inline a {
width: auto;
height: auto;
margin: 0 10px;
line-height: 2.4;
font-size: 13px;
}
.socialbar.small.inline a .icon {
font-size: 16px;
vertical-align: -1px;
}
.socialbar a:first-child {
margin-left: 0;
}
.socialbar a:last-child {
margin-right: 0;
}
.socialbar.default a.white {
background: #fff;
border-color: #fff;
}
.socialbar.default a.white:hover {
background: transparent;
color: #fff;
border-color: #fff;
}
.socialbar.default.outline a.white {
background: transparent;
color: #fff;
}
.socialbar.default.outline a.white:hover {
background: #fff;
color: #ffffff;
}
.socialbar.default.flat a.white {
background: transparent;
color: #fff;
border-color: transparent;
}
.socialbar.default.flat a.white:hover {
background: #fff;
color: #ffffff;
}
.socialbar.default.inline a.white {
background: transparent;
border-color: transparent;
color: #fff;
}
.socialbar.default.inline a.white:hover {
color: #fff;
}
.socialbar.default a.facebook {
background: #4c6ecd;
border-color: #4c6ecd;
}
.socialbar.default a.facebook:hover {
background: transparent;
color: #4c6ecd;
border-color: #4c6ecd;
}
.socialbar.default.outline a.facebook {
background: transparent;
color: #4c6ecd;
}
.socialbar.default.outline a.facebook:hover {
background: #4c6ecd;
color: #ffffff;
}
.socialbar.default.flat a.facebook {
background: transparent;
color: #4c6ecd;
border-color: transparent;
}
.socialbar.default.flat a.facebook:hover {
background: #4c6ecd;
color: #ffffff;
}
.socialbar.default.inline a.facebook {
background: transparent;
border-color: transparent;
color: #4c6ecd;
}
.socialbar.default.inline a.facebook:hover {
color: #4c6ecd;
}
.socialbar.default a.twitter {
background: #44acfe;
border-color: #44acfe;
}
.socialbar.default a.twitter:hover {
background: transparent;
color: #44acfe;
border-color: #44acfe;
}
.socialbar.default.outline a.twitter {
background: transparent;
color: #44acfe;
}
.socialbar.default.outline a.twitter:hover {
background: #44acfe;
color: #ffffff;
}
.socialbar.default.flat a.twitter {
background: transparent;
color: #44acfe;
border-color: transparent;
}
.socialbar.default.flat a.twitter:hover {
background: #44acfe;
color: #ffffff;
}
.socialbar.default.inline a.twitter {
background: transparent;
border-color: transparent;
color: #44acfe;
}
.socialbar.default.inline a.twitter:hover {
color: #44acfe;
}
.socialbar.default a.googleplus {
background: #fe5757;
border-color: #fe5757;
}
.socialbar.default a.googleplus:hover {
background: transparent;
color: #fe5757;
border-color: #fe5757;
}
.socialbar.default.outline a.googleplus {
background: transparent;
color: #fe5757;
}
.socialbar.default.outline a.googleplus:hover {
background: #fe5757;
color: #ffffff;
}
.socialbar.default.flat a.googleplus {
background: transparent;
color: #fe5757;
border-color: transparent;
}
.socialbar.default.flat a.googleplus:hover {
background: #fe5757;
color: #ffffff;
}
.socialbar.default.inline a.googleplus {
background: transparent;
border-color: transparent;
color: #fe5757;
}
.socialbar.default.inline a.googleplus:hover {
color: #fe5757;
}
.socialbar.default a.pinterest {
background: #e8323f;
border-color: #e8323f;
}
.socialbar.default a.pinterest:hover {
background: transparent;
color: #e8323f;
border-color: #e8323f;
}
.socialbar.default.outline a.pinterest {
background: transparent;
color: #e8323f;
}
.socialbar.default.outline a.pinterest:hover {
background: #e8323f;
color: #ffffff;
}
.socialbar.default.flat a.pinterest {
background: transparent;
color: #e8323f;
border-color: transparent;
}
.socialbar.default.flat a.pinterest:hover {
background: #e8323f;
color: #ffffff;
}
.socialbar.default.inline a.pinterest {
background: transparent;
border-color: transparent;
color: #e8323f;
}
.socialbar.default.inline a.pinterest:hover {
color: #e8323f;
}
.socialbar.default a.linkedin {
background: #4477ab;
border-color: #4477ab;
}
.socialbar.default a.linkedin:hover {
background: transparent;
color: #4477ab;
border-color: #4477ab;
}
.socialbar.default.outline a.linkedin {
background: transparent;
color: #4477ab;
}
.socialbar.default.outline a.linkedin:hover {
background: #4477ab;
color: #ffffff;
}
.socialbar.default.flat a.linkedin {
background: transparent;
color: #4477ab;
border-color: transparent;
}
.socialbar.default.flat a.linkedin:hover {
background: #4477ab;
color: #ffffff;
}
.socialbar.default.inline a.linkedin {
background: transparent;
border-color: transparent;
color: #4477ab;
}
.socialbar.default.inline a.linkedin:hover {
color: #4477ab;
}
.socialbar.default a.dribbble {
background: #fd629e;
border-color: #fd629e;
}
.socialbar.default a.dribbble:hover {
background: transparent;
color: #fd629e;
border-color: #fd629e;
}
.socialbar.default.outline a.dribbble {
background: transparent;
color: #fd629e;
}
.socialbar.default.outline a.dribbble:hover {
background: #fd629e;
color: #ffffff;
}
.socialbar.default.flat a.dribbble {
background: transparent;
color: #fd629e;
border-color: transparent;
}
.socialbar.default.flat a.dribbble:hover {
background: #fd629e;
color: #ffffff;
}
.socialbar.default.inline a.dribbble {
background: transparent;
border-color: transparent;
color: #fd629e;
}
.socialbar.default.inline a.dribbble:hover {
color: #fd629e;
}
.socialbar.default a.github {
background: #323131;
border-color: #323131;
}
.socialbar.default a.github:hover {
background: transparent;
color: #323131;
border-color: #323131;
}
.socialbar.default.outline a.github {
background: transparent;
color: #323131;
}
.socialbar.default.outline a.github:hover {
background: #323131;
color: #ffffff;
}
.socialbar.default.flat a.github {
background: transparent;
color: #323131;
border-color: transparent;
}
.socialbar.default.flat a.github:hover {
background: #323131;
color: #ffffff;
}
.socialbar.default.inline a.github {
background: transparent;
border-color: transparent;
color: #323131;
}
.socialbar.default.inline a.github:hover {
color: #323131;
}
.socialbar.default a.instagram {
background: #3a6aba;
border-color: #3a6aba;
}
.socialbar.default a.instagram:hover {
background: transparent;
color: #3a6aba;
border-color: #3a6aba;
}
.socialbar.default.outline a.instagram {
background: transparent;
color: #3a6aba;
}
.socialbar.default.outline a.instagram:hover {
background: #3a6aba;
color: #ffffff;
}
.socialbar.default.flat a.instagram {
background: transparent;
color: #3a6aba;
border-color: transparent;
}
.socialbar.default.flat a.instagram:hover {
background: #3a6aba;
color: #ffffff;
}
.socialbar.default.inline a.instagram {
background: transparent;
border-color: transparent;
color: #3a6aba;
}
.socialbar.default.inline a.instagram:hover {
color: #3a6aba;
}
.socialbar.default a.dropbox {
background: #187fe7;
border-color: #187fe7;
}
.socialbar.default a.dropbox:hover {
background: transparent;
color: #187fe7;
border-color: #187fe7;
}
.socialbar.default.outline a.dropbox {
background: transparent;
color: #187fe7;
}
.socialbar.default.outline a.dropbox:hover {
background: #187fe7;
color: #ffffff;
}
.socialbar.default.flat a.dropbox {
background: transparent;
color: #187fe7;
border-color: transparent;
}
.socialbar.default.flat a.dropbox:hover {
background: #187fe7;
color: #ffffff;
}
.socialbar.default.inline a.dropbox {
background: transparent;
border-color: transparent;
color: #187fe7;
}
.socialbar.default.inline a.dropbox:hover {
color: #187fe7;
}
.socialbar.default a.vk {
background: #6083ab;
border-color: #6083ab;
}
.socialbar.default a.vk:hover {
background: transparent;
color: #6083ab;
border-color: #6083ab;
}
.socialbar.default.outline a.vk {
background: transparent;
color: #6083ab;
}
.socialbar.default.outline a.vk:hover {
background: #6083ab;
color: #ffffff;
}
.socialbar.default.flat a.vk {
background: transparent;
color: #6083ab;
border-color: transparent;
}
.socialbar.default.flat a.vk:hover {
background: #6083ab;
color: #ffffff;
}
.socialbar.default.inline a.vk {
background: transparent;
border-color: transparent;
color: #6083ab;
}
.socialbar.default.inline a.vk:hover {
color: #6083ab;
}
.socialbar.default a.youtube {
background: #f00;
border-color: #f00;
}
.socialbar.default a.youtube:hover {
background: transparent;
color: #f00;
border-color: #f00;
}
.socialbar.default.outline a.youtube {
background: transparent;
color: #f00;
}
.socialbar.default.outline a.youtube:hover {
background: #f00;
color: #ffffff;
}
.socialbar.default.flat a.youtube {
background: transparent;
color: #f00;
border-color: transparent;
}
.socialbar.default.flat a.youtube:hover {
background: #f00;
color: #ffffff;
}
.socialbar.default.inline a.youtube {
background: transparent;
border-color: transparent;
color: #f00;
}
.socialbar.default.inline a.youtube:hover {
color: #f00;
}
.socialbar.default a.vimeo {
background: #1ab8ea;
border-color: #1ab8ea;
}
.socialbar.default a.vimeo:hover {
background: transparent;
color: #1ab8ea;
border-color: #1ab8ea;
}
.socialbar.default.outline a.vimeo {
background: transparent;
color: #1ab8ea;
}
.socialbar.default.outline a.vimeo:hover {
background: #1ab8ea;
color: #ffffff;
}
.socialbar.default.flat a.vimeo {
background: transparent;
color: #1ab8ea;
border-color: transparent;
}
.socialbar.default.flat a.vimeo:hover {
background: #1ab8ea;
color: #ffffff;
}
.socialbar.default.inline a.vimeo {
background: transparent;
border-color: transparent;
color: #1ab8ea;
}
.socialbar.default.inline a.vimeo:hover {
color: #1ab8ea;
}
.socialbar.default a.behance {
background: #0056ff;
border-color: #0056ff;
}
.socialbar.default a.behance:hover {
background: transparent;
color: #0056ff;
border-color: #0056ff;
}
.socialbar.default.outline a.behance {
background: transparent;
color: #0056ff;
}
.socialbar.default.outline a.behance:hover {
background: #0056ff;
color: #ffffff;
}
.socialbar.default.flat a.behance {
background: transparent;
color: #0056ff;
border-color: transparent;
}
.socialbar.default.flat a.behance:hover {
background: #0056ff;
color: #ffffff;
}
.socialbar.default.inline a.behance {
background: transparent;
border-color: transparent;
color: #0056ff;
}
.socialbar.default.inline a.behance:hover {
color: #0056ff;
}
.socialbar.default a.tumblr {
background: #2a445f;
border-color: #2a445f;
}
.socialbar.default a.tumblr:hover {
background: transparent;
color: #2a445f;
border-color: #2a445f;
}
.socialbar.default.outline a.tumblr {
background: transparent;
color: #2a445f;
}
.socialbar.default.outline a.tumblr:hover {
background: #2a445f;
color: #ffffff;
}
.socialbar.default.flat a.tumblr {
background: transparent;
color: #2a445f;
border-color: transparent;
}
.socialbar.default.flat a.tumblr:hover {
background: #2a445f;
color: #ffffff;
}
.socialbar.default.inline a.tumblr {
background: transparent;
border-color: transparent;
color: #2a445f;
}
.socialbar.default.inline a.tumblr:hover {
color: #2a445f;
}
.socialbar.default a.flickr {
background: #0063db;
border-color: #0063db;
}
.socialbar.default a.flickr:hover {
background: transparent;
color: #0063db;
border-color: #0063db;
}
.socialbar.default.outline a.flickr {
background: transparent;
color: #0063db;
}
.socialbar.default.outline a.flickr:hover {
background: #0063db;
color: #ffffff;
}
.socialbar.default.flat a.flickr {
background: transparent;
color: #0063db;
border-color: transparent;
}
.socialbar.default.flat a.flickr:hover {
background: #0063db;
color: #ffffff;
}
.socialbar.default.inline a.flickr {
background: transparent;
border-color: transparent;
color: #0063db;
}
.socialbar.default.inline a.flickr:hover {
color: #0063db;
}
.socialbar.default a.reddit {
background: #ff4501;
border-color: #ff4501;
}
.socialbar.default a.reddit:hover {
background: transparent;
color: #ff4501;
border-color: #ff4501;
}
.socialbar.default.outline a.reddit {
background: transparent;
color: #ff4501;
}
.socialbar.default.outline a.reddit:hover {
background: #ff4501;
color: #ffffff;
}
.socialbar.default.flat a.reddit {
background: transparent;
color: #ff4501;
border-color: transparent;
}
.socialbar.default.flat a.reddit:hover {
background: #ff4501;
color: #ffffff;
}
.socialbar.default.inline a.reddit {
background: transparent;
border-color: transparent;
color: #ff4501;
}
.socialbar.default.inline a.reddit:hover {
color: #ff4501;
}
.socialbar.default a.snapchat {
background: #e0e410;
border-color: #e0e410;
}
.socialbar.default a.snapchat:hover {
background: transparent;
color: #e0e410;
border-color: #e0e410;
}
.socialbar.default.outline a.snapchat {
background: transparent;
color: #e0e410;
}
.socialbar.default.outline a.snapchat:hover {
background: #e0e410;
color: #ffffff;
}
.socialbar.default.flat a.snapchat {
background: transparent;
color: #e0e410;
border-color: transparent;
}
.socialbar.default.flat a.snapchat:hover {
background: #e0e410;
color: #ffffff;
}
.socialbar.default.inline a.snapchat {
background: transparent;
border-color: transparent;
color: #e0e410;
}
.socialbar.default.inline a.snapchat:hover {
color: #e0e410;
}
.socialbar.default a.whatsapp {
background: #0ec143;
border-color: #0ec143;
}
.socialbar.default a.whatsapp:hover {
background: transparent;
color: #0ec143;
border-color: #0ec143;
}
.socialbar.default.outline a.whatsapp {
background: transparent;
color: #0ec143;
}
.socialbar.default.outline a.whatsapp:hover {
background: #0ec143;
color: #ffffff;
}
.socialbar.default.flat a.whatsapp {
background: transparent;
color: #0ec143;
border-color: transparent;
}
.socialbar.default.flat a.whatsapp:hover {
background: #0ec143;
color: #ffffff;
}
.socialbar.default.inline a.whatsapp {
background: transparent;
border-color: transparent;
color: #0ec143;
}
.socialbar.default.inline a.whatsapp:hover {
color: #0ec143;
}
.socialbar.default a.quora {
background: #a82401;
border-color: #a82401;
}
.socialbar.default a.quora:hover {
background: transparent;
color: #a82401;
border-color: #a82401;
}
.socialbar.default.outline a.quora {
background: transparent;
color: #a82401;
}
.socialbar.default.outline a.quora:hover {
background: #a82401;
color: #ffffff;
}
.socialbar.default.flat a.quora {
background: transparent;
color: #a82401;
border-color: transparent;
}
.socialbar.default.flat a.quora:hover {
background: #a82401;
color: #ffffff;
}
.socialbar.default.inline a.quora {
background: transparent;
border-color: transparent;
color: #a82401;
}
.socialbar.default.inline a.quora:hover {
color: #a82401;
}
.socialbar.default a.vine {
background: #00be8e;
border-color: #00be8e;
}
.socialbar.default a.vine:hover {
background: transparent;
color: #00be8e;
border-color: #00be8e;
}
.socialbar.default.outline a.vine {
background: transparent;
color: #00be8e;
}
.socialbar.default.outline a.vine:hover {
background: #00be8e;
color: #ffffff;
}
.socialbar.default.flat a.vine {
background: transparent;
color: #00be8e;
border-color: transparent;
}
.socialbar.default.flat a.vine:hover {
background: #00be8e;
color: #ffffff;
}
.socialbar.default.inline a.vine {
background: transparent;
border-color: transparent;
color: #00be8e;
}
.socialbar.default.inline a.vine:hover {
color: #00be8e;
}
.socialbar.default a.digg {
background: #1c5891;
border-color: #1c5891;
}
.socialbar.default a.digg:hover {
background: transparent;
color: #1c5891;
border-color: #1c5891;
}
.socialbar.default.outline a.digg {
background: transparent;
color: #1c5891;
}
.socialbar.default.outline a.digg:hover {
background: #1c5891;
color: #ffffff;
}
.socialbar.default.flat a.digg {
background: transparent;
color: #1c5891;
border-color: transparent;
}
.socialbar.default.flat a.digg:hover {
background: #1c5891;
color: #ffffff;
}
.socialbar.default.inline a.digg {
background: transparent;
border-color: transparent;
color: #1c5891;
}
.socialbar.default.inline a.digg:hover {
color: #1c5891;
}
.socialbar.default a.foursquare {
background: #fa4778;
border-color: #fa4778;
}
.socialbar.default a.foursquare:hover {
background: transparent;
color: #fa4778;
border-color: #fa4778;
}
.socialbar.default.outline a.foursquare {
background: transparent;
color: #fa4778;
}
.socialbar.default.outline a.foursquare:hover {
background: #fa4778;
color: #ffffff;
}
.socialbar.default.flat a.foursquare {
background: transparent;
color: #fa4778;
border-color: transparent;
}
.socialbar.default.flat a.foursquare:hover {
background: #fa4778;
color: #ffffff;
}
.socialbar.default.inline a.foursquare {
background: transparent;
border-color: transparent;
color: #fa4778;
}
.socialbar.default.inline a.foursquare:hover {
color: #fa4778;
}
.socialbar.default a.wechat {
background: #28b842;
border-color: #28b842;
}
.socialbar.default a.wechat:hover {
background: transparent;
color: #28b842;
border-color: #28b842;
}
.socialbar.default.outline a.wechat {
background: transparent;
color: #28b842;
}
.socialbar.default.outline a.wechat:hover {
background: #28b842;
color: #ffffff;
}
.socialbar.default.flat a.wechat {
background: transparent;
color: #28b842;
border-color: transparent;
}
.socialbar.default.flat a.wechat:hover {
background: #28b842;
color: #ffffff;
}
.socialbar.default.inline a.wechat {
background: transparent;
border-color: transparent;
color: #28b842;
}
.socialbar.default.inline a.wechat:hover {
color: #28b842;
}
.socialbar.hover-default a.white:hover {
background: transparent;
color: #fff;
border-color: #fff;
}
.socialbar.hover-default.outline a.white:hover {
background: #fff;
color: #ffffff;
}
.socialbar.hover-default.flat a.white:hover {
background: #fff;
color: #ffffff;
}
.socialbar.hover-default.inline a.white:hover {
color: #fff;
}
.socialbar.hover-default.inline a.white:before {
background-color: #fff;
}
.socialbar.hover-default a.facebook:hover {
background: transparent;
color: #4c6ecd;
border-color: #4c6ecd;
}
.socialbar.hover-default.outline a.facebook:hover {
background: #4c6ecd;
color: #ffffff;
}
.socialbar.hover-default.flat a.facebook:hover {
background: #4c6ecd;
color: #ffffff;
}
.socialbar.hover-default.inline a.facebook:hover {
color: #4c6ecd;
}
.socialbar.hover-default.inline a.facebook:before {
background-color: #4c6ecd;
}
.socialbar.hover-default a.twitter:hover {
background: transparent;
color: #44acfe;
border-color: #44acfe;
}
.socialbar.hover-default.outline a.twitter:hover {
background: #44acfe;
color: #ffffff;
}
.socialbar.hover-default.flat a.twitter:hover {
background: #44acfe;
color: #ffffff;
}
.socialbar.hover-default.inline a.twitter:hover {
color: #44acfe;
}
.socialbar.hover-default.inline a.twitter:before {
background-color: #44acfe;
}
.socialbar.hover-default a.googleplus:hover {
background: transparent;
color: #fe5757;
border-color: #fe5757;
}
.socialbar.hover-default.outline a.googleplus:hover {
background: #fe5757;
color: #ffffff;
}
.socialbar.hover-default.flat a.googleplus:hover {
background: #fe5757;
color: #ffffff;
}
.socialbar.hover-default.inline a.googleplus:hover {
color: #fe5757;
}
.socialbar.hover-default.inline a.googleplus:before {
background-color: #fe5757;
}
.socialbar.hover-default a.pinterest:hover {
background: transparent;
color: #e8323f;
border-color: #e8323f;
}
.socialbar.hover-default.outline a.pinterest:hover {
background: #e8323f;
color: #ffffff;
}
.socialbar.hover-default.flat a.pinterest:hover {
background: #e8323f;
color: #ffffff;
}
.socialbar.hover-default.inline a.pinterest:hover {
color: #e8323f;
}
.socialbar.hover-default.inline a.pinterest:before {
background-color: #e8323f;
}
.socialbar.hover-default a.linkedin:hover {
background: transparent;
color: #4477ab;
border-color: #4477ab;
}
.socialbar.hover-default.outline a.linkedin:hover {
background: #4477ab;
color: #ffffff;
}
.socialbar.hover-default.flat a.linkedin:hover {
background: #4477ab;
color: #ffffff;
}
.socialbar.hover-default.inline a.linkedin:hover {
color: #4477ab;
}
.socialbar.hover-default.inline a.linkedin:before {
background-color: #4477ab;
}
.socialbar.hover-default a.dribbble:hover {
background: transparent;
color: #fd629e;
border-color: #fd629e;
}
.socialbar.hover-default.outline a.dribbble:hover {
background: #fd629e;
color: #ffffff;
}
.socialbar.hover-default.flat a.dribbble:hover {
background: #fd629e;
color: #ffffff;
}
.socialbar.hover-default.inline a.dribbble:hover {
color: #fd629e;
}
.socialbar.hover-default.inline a.dribbble:before {
background-color: #fd629e;
}
.socialbar.hover-default a.github:hover {
background: transparent;
color: #323131;
border-color: #323131;
}
.socialbar.hover-default.outline a.github:hover {
background: #323131;
color: #ffffff;
}
.socialbar.hover-default.flat a.github:hover {
background: #323131;
color: #ffffff;
}
.socialbar.hover-default.inline a.github:hover {
color: #323131;
}
.socialbar.hover-default.inline a.github:before {
background-color: #323131;
}
.socialbar.hover-default a.instagram:hover {
background: transparent;
color: #3a6aba;
border-color: #3a6aba;
}
.socialbar.hover-default.outline a.instagram:hover {
background: #3a6aba;
color: #ffffff;
}
.socialbar.hover-default.flat a.instagram:hover {
background: #3a6aba;
color: #ffffff;
}
.socialbar.hover-default.inline a.instagram:hover {
color: #3a6aba;
}
.socialbar.hover-default.inline a.instagram:before {
background-color: #3a6aba;
}
.socialbar.hover-default a.dropbox:hover {
background: transparent;
color: #187fe7;
border-color: #187fe7;
}
.socialbar.hover-default.outline a.dropbox:hover {
background: #187fe7;
color: #ffffff;
}
.socialbar.hover-default.flat a.dropbox:hover {
background: #187fe7;
color: #ffffff;
}
.socialbar.hover-default.inline a.dropbox:hover {
color: #187fe7;
}
.socialbar.hover-default.inline a.dropbox:before {
background-color: #187fe7;
}
.socialbar.hover-default a.vk:hover {
background: transparent;
color: #6083ab;
border-color: #6083ab;
}
.socialbar.hover-default.outline a.vk:hover {
background: #6083ab;
color: #ffffff;
}
.socialbar.hover-default.flat a.vk:hover {
background: #6083ab;
color: #ffffff;
}
.socialbar.hover-default.inline a.vk:hover {
color: #6083ab;
}
.socialbar.hover-default.inline a.vk:before {
background-color: #6083ab;
}
.socialbar.hover-default a.youtube:hover {
background: transparent;
color: #f00;
border-color: #f00;
}
.socialbar.hover-default.outline a.youtube:hover {
background: #f00;
color: #ffffff;
}
.socialbar.hover-default.flat a.youtube:hover {
background: #f00;
color: #ffffff;
}
.socialbar.hover-default.inline a.youtube:hover {
color: #f00;
}
.socialbar.hover-default.inline a.youtube:before {
background-color: #f00;
}
.socialbar.hover-default a.vimeo:hover {
background: transparent;
color: #1ab8ea;
border-color: #1ab8ea;
}
.socialbar.hover-default.outline a.vimeo:hover {
background: #1ab8ea;
color: #ffffff;
}
.socialbar.hover-default.flat a.vimeo:hover {
background: #1ab8ea;
color: #ffffff;
}
.socialbar.hover-default.inline a.vimeo:hover {
color: #1ab8ea;
}
.socialbar.hover-default.inline a.vimeo:before {
background-color: #1ab8ea;
}
.socialbar.hover-default a.behance:hover {
background: transparent;
color: #0056ff;
border-color: #0056ff;
}
.socialbar.hover-default.outline a.behance:hover {
background: #0056ff;
color: #ffffff;
}
.socialbar.hover-default.flat a.behance:hover {
background: #0056ff;
color: #ffffff;
}
.socialbar.hover-default.inline a.behance:hover {
color: #0056ff;
}
.socialbar.hover-default.inline a.behance:before {
background-color: #0056ff;
}
.socialbar.hover-default a.tumblr:hover {
background: transparent;
color: #2a445f;
border-color: #2a445f;
}
.socialbar.hover-default.outline a.tumblr:hover {
background: #2a445f;
color: #ffffff;
}
.socialbar.hover-default.flat a.tumblr:hover {
background: #2a445f;
color: #ffffff;
}
.socialbar.hover-default.inline a.tumblr:hover {
color: #2a445f;
}
.socialbar.hover-default.inline a.tumblr:before {
background-color: #2a445f;
}
.socialbar.hover-default a.flickr:hover {
background: transparent;
color: #0063db;
border-color: #0063db;
}
.socialbar.hover-default.outline a.flickr:hover {
background: #0063db;
color: #ffffff;
}
.socialbar.hover-default.flat a.flickr:hover {
background: #0063db;
color: #ffffff;
}
.socialbar.hover-default.inline a.flickr:hover {
color: #0063db;
}
.socialbar.hover-default.inline a.flickr:before {
background-color: #0063db;
}
.socialbar.hover-default a.reddit:hover {
background: transparent;
color: #ff4501;
border-color: #ff4501;
}
.socialbar.hover-default.outline a.reddit:hover {
background: #ff4501;
color: #ffffff;
}
.socialbar.hover-default.flat a.reddit:hover {
background: #ff4501;
color: #ffffff;
}
.socialbar.hover-default.inline a.reddit:hover {
color: #ff4501;
}
.socialbar.hover-default.inline a.reddit:before {
background-color: #ff4501;
}
.socialbar.hover-default a.snapchat:hover {
background: transparent;
color: #e0e410;
border-color: #e0e410;
}
.socialbar.hover-default.outline a.snapchat:hover {
background: #e0e410;
color: #ffffff;
}
.socialbar.hover-default.flat a.snapchat:hover {
background: #e0e410;
color: #ffffff;
}
.socialbar.hover-default.inline a.snapchat:hover {
color: #e0e410;
}
.socialbar.hover-default.inline a.snapchat:before {
background-color: #e0e410;
}
.socialbar.hover-default a.whatsapp:hover {
background: transparent;
color: #0ec143;
border-color: #0ec143;
}
.socialbar.hover-default.outline a.whatsapp:hover {
background: #0ec143;
color: #ffffff;
}
.socialbar.hover-default.flat a.whatsapp:hover {
background: #0ec143;
color: #ffffff;
}
.socialbar.hover-default.inline a.whatsapp:hover {
color: #0ec143;
}
.socialbar.hover-default.inline a.whatsapp:before {
background-color: #0ec143;
}
.socialbar.hover-default a.quora:hover {
background: transparent;
color: #a82401;
border-color: #a82401;
}
.socialbar.hover-default.outline a.quora:hover {
background: #a82401;
color: #ffffff;
}
.socialbar.hover-default.flat a.quora:hover {
background: #a82401;
color: #ffffff;
}
.socialbar.hover-default.inline a.quora:hover {
color: #a82401;
}
.socialbar.hover-default.inline a.quora:before {
background-color: #a82401;
}
.socialbar.hover-default a.vine:hover {
background: transparent;
color: #00be8e;
border-color: #00be8e;
}
.socialbar.hover-default.outline a.vine:hover {
background: #00be8e;
color: #ffffff;
}
.socialbar.hover-default.flat a.vine:hover {
background: #00be8e;
color: #ffffff;
}
.socialbar.hover-default.inline a.vine:hover {
color: #00be8e;
}
.socialbar.hover-default.inline a.vine:before {
background-color: #00be8e;
}
.socialbar.hover-default a.digg:hover {
background: transparent;
color: #1c5891;
border-color: #1c5891;
}
.socialbar.hover-default.outline a.digg:hover {
background: #1c5891;
color: #ffffff;
}
.socialbar.hover-default.flat a.digg:hover {
background: #1c5891;
color: #ffffff;
}
.socialbar.hover-default.inline a.digg:hover {
color: #1c5891;
}
.socialbar.hover-default.inline a.digg:before {
background-color: #1c5891;
}
.socialbar.hover-default a.foursquare:hover {
background: transparent;
color: #fa4778;
border-color: #fa4778;
}
.socialbar.hover-default.outline a.foursquare:hover {
background: #fa4778;
color: #ffffff;
}
.socialbar.hover-default.flat a.foursquare:hover {
background: #fa4778;
color: #ffffff;
}
.socialbar.hover-default.inline a.foursquare:hover {
color: #fa4778;
}
.socialbar.hover-default.inline a.foursquare:before {
background-color: #fa4778;
}
.socialbar.hover-default a.wechat:hover {
background: transparent;
color: #28b842;
border-color: #28b842;
}
.socialbar.hover-default.outline a.wechat:hover {
background: #28b842;
color: #ffffff;
}
.socialbar.hover-default.flat a.wechat:hover {
background: #28b842;
color: #ffffff;
}
.socialbar.hover-default.inline a.wechat:hover {
color: #28b842;
}
.socialbar.hover-default.inline a.wechat:before {
background-color: #28b842;
}
.socialbar.brand a {
background: #174EE2;
border-color: #174EE2;
}
.socialbar.brand a:hover {
background: transparent;
color: #174EE2;
}
.socialbar.brand.outline a {
background: transparent;
color: #174EE2;
}
.socialbar.brand.outline a:hover {
background: #174EE2;
color: #ffffff;
}
.socialbar.brand.flat a {
background: transparent;
color: #174EE2;
border-color: transparent;
}
.socialbar.brand.flat a:hover {
background: #174EE2;
color: #ffffff;
}
.socialbar.brand.inline a {
background: transparent;
border-color: transparent;
color: #282828;
}
.socialbar.brand.inline a:hover {
color: #174EE2;
}
.socialbar.boxed {
margin: 0;
overflow: hidden;
}
.socialbar.boxed.social-column-1 a {
width: 100%;
}
.socialbar.boxed.social-column-2 a {
width: 50%;
}
.socialbar.boxed.social-column-3 a {
width: 33.333%;
}
.socialbar.boxed.social-column-4 a {
width: 25%;
}
.socialbar.boxed.social-column-5 a {
width: 20%;
}
.socialbar.boxed.social-column-6 a {
width: 16.666%;
}
.socialbar.boxed.social-column-7 a {
width: 14.285%;
}
.socialbar.boxed.social-column-8 a {
width: 12.5%;
}
.socialbar.boxed.social-column-9 a {
width: 11.11%;
}
.socialbar.boxed.social-column-10 a {
width: 10%;
}
.socialbar.boxed a {
height: 100px;
float: left;
margin: 0;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
line-height: 100px;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.socialbar.boxed a .icon {
width: 100%;
text-align: center;
position: absolute;
opacity: 0;
top: 60%;
left: 0;
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-webkit-transition-property: opacity, top;
-o-transition-property: opacity, top;
transition-property: opacity, top;
}
.socialbar.boxed a .social-text {
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 600;
position: relative;
top: 0;
opacity: 1;
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-webkit-transition-property: opacity, top;
-o-transition-property: opacity, top;
transition-property: opacity, top;
}
.socialbar.boxed a:hover .icon {
opacity: 1;
top: 40%;
}
.socialbar.boxed a:hover .social-text {
opacity: 0;
top: -30px;
}
.socialbar.boxed a.default a.white {
background: #fff;
border-color: #fff;
}
.socialbar.boxed a.default a.white:hover {
background: #fff;
color: #ffffff;
}
.socialbar.boxed a.default a.facebook {
background: #4c6ecd;
border-color: #4c6ecd;
}
.socialbar.boxed a.default a.facebook:hover {
background: #4c6ecd;
color: #ffffff;
}
.socialbar.boxed a.default a.twitter {
background: #44acfe;
border-color: #44acfe;
}
.socialbar.boxed a.default a.twitter:hover {
background: #44acfe;
color: #ffffff;
}
.socialbar.boxed a.default a.googleplus {
background: #fe5757;
border-color: #fe5757;
}
.socialbar.boxed a.default a.googleplus:hover {
background: #fe5757;
color: #ffffff;
}
.socialbar.boxed a.default a.pinterest {
background: #e8323f;
border-color: #e8323f;
}
.socialbar.boxed a.default a.pinterest:hover {
background: #e8323f;
color: #ffffff;
}
.socialbar.boxed a.default a.linkedin {
background: #4477ab;
border-color: #4477ab;
}
.socialbar.boxed a.default a.linkedin:hover {
background: #4477ab;
color: #ffffff;
}
.socialbar.boxed a.default a.dribbble {
background: #fd629e;
border-color: #fd629e;
}
.socialbar.boxed a.default a.dribbble:hover {
background: #fd629e;
color: #ffffff;
}
.socialbar.boxed a.default a.github {
background: #323131;
border-color: #323131;
}
.socialbar.boxed a.default a.github:hover {
background: #323131;
color: #ffffff;
}
.socialbar.boxed a.default a.instagram {
background: #3a6aba;
border-color: #3a6aba;
}
.socialbar.boxed a.default a.instagram:hover {
background: #3a6aba;
color: #ffffff;
}
.socialbar.boxed a.default a.dropbox {
background: #187fe7;
border-color: #187fe7;
}
.socialbar.boxed a.default a.dropbox:hover {
background: #187fe7;
color: #ffffff;
}
.socialbar.boxed a.default a.vk {
background: #6083ab;
border-color: #6083ab;
}
.socialbar.boxed a.default a.vk:hover {
background: #6083ab;
color: #ffffff;
}
.socialbar.boxed a.default a.youtube {
background: #f00;
border-color: #f00;
}
.socialbar.boxed a.default a.youtube:hover {
background: #f00;
color: #ffffff;
}
.socialbar.boxed a.default a.vimeo {
background: #1ab8ea;
border-color: #1ab8ea;
}
.socialbar.boxed a.default a.vimeo:hover {
background: #1ab8ea;
color: #ffffff;
}
.socialbar.boxed a.default a.behance {
background: #0056ff;
border-color: #0056ff;
}
.socialbar.boxed a.default a.behance:hover {
background: #0056ff;
color: #ffffff;
}
.socialbar.boxed a.default a.tumblr {
background: #2a445f;
border-color: #2a445f;
}
.socialbar.boxed a.default a.tumblr:hover {
background: #2a445f;
color: #ffffff;
}
.socialbar.boxed a.default a.flickr {
background: #0063db;
border-color: #0063db;
}
.socialbar.boxed a.default a.flickr:hover {
background: #0063db;
color: #ffffff;
}
.socialbar.boxed a.default a.reddit {
background: #ff4501;
border-color: #ff4501;
}
.socialbar.boxed a.default a.reddit:hover {
background: #ff4501;
color: #ffffff;
}
.socialbar.boxed a.default a.snapchat {
background: #e0e410;
border-color: #e0e410;
}
.socialbar.boxed a.default a.snapchat:hover {
background: #e0e410;
color: #ffffff;
}
.socialbar.boxed a.default a.whatsapp {
background: #0ec143;
border-color: #0ec143;
}
.socialbar.boxed a.default a.whatsapp:hover {
background: #0ec143;
color: #ffffff;
}
.socialbar.boxed a.default a.quora {
background: #a82401;
border-color: #a82401;
}
.socialbar.boxed a.default a.quora:hover {
background: #a82401;
color: #ffffff;
}
.socialbar.boxed a.default a.vine {
background: #00be8e;
border-color: #00be8e;
}
.socialbar.boxed a.default a.vine:hover {
background: #00be8e;
color: #ffffff;
}
.socialbar.boxed a.default a.digg {
background: #1c5891;
border-color: #1c5891;
}
.socialbar.boxed a.default a.digg:hover {
background: #1c5891;
color: #ffffff;
}
.socialbar.boxed a.default a.foursquare {
background: #fa4778;
border-color: #fa4778;
}
.socialbar.boxed a.default a.foursquare:hover {
background: #fa4778;
color: #ffffff;
}
.socialbar.boxed a.default a.wechat {
background: #28b842;
border-color: #28b842;
}
.socialbar.boxed a.default a.wechat:hover {
background: #28b842;
color: #ffffff;
}
@media screen and (max-width: 768px) {
.socialbar.boxed {
clear: both;
}
.socialbar.boxed a {
height: 60px;
line-height: 60px;
clear: none;
}
.socialbar.boxed a .social-text {
display: none;
}
.socialbar.boxed a .icon {
opacity: 1;
position: static;
}
}
@-webkit-keyframes toTopFromBottom {
59% {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
}
60% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
61% {
opacity: 1;
}
}
@keyframes toTopFromBottom {
59% {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
}
60% {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
61% {
opacity: 1;
}
}
/* ====================== [ End Social bar ] ====================== */
/* ====================== [ Start Text Animation & Images ] ====================== */
.splitting.animated .char {
-webkit-animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
-webkit-animation-delay: calc(30ms * var(--char-index));
animation-delay: calc(30ms * var(--char-index));
}
.splitting .whitespace {
width: 5px;
}
.splitting.txt.animated .char {
-webkit-animation: fadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
animation: fadeIn 0.3s cubic-bezier(0.3, 0, 0.7, 1) both;
-webkit-animation-delay: calc(10ms * var(--char-index));
animation-delay: calc(10ms * var(--char-index));
}
.splitting.txt .whitespace {
width: 5px;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* ====================== [ End Text Animation & Images ] ====================== */
/* ====================== [ Start Overlay ] ====================== */
[data-overlay-dark],
[data-overlay-light] {
position: relative;
}
[data-overlay-dark] .container,
[data-overlay-light] .container {
position: relative;
z-index: 2;
}
[data-overlay-dark]:before,
[data-overlay-light]:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
[data-overlay-dark]:before {
background: #000;
}
[data-overlay-light]:before {
background: #FFF;
}
[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
opacity: 0;
}
[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
opacity: .1;
}
[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
opacity: .2;
}
[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
opacity: .3;
}
[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
opacity: .4;
}
[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
opacity: .5;
}
[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
opacity: .6;
}
[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
opacity: .7;
}
[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
opacity: .8;
}
[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before,
[data-overlay-color="9"]:before {
opacity: .9;
}
[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
opacity: 1;
}
/* ====================== [ End Overlay ] ====================== */
/* ====================== [ Start Header ] ====================== */
.page-header {
background-color: #121212;
left: 0;
right: 0;
top: 0;
z-index: 3;
}
.page-header .col,
.page-header [class*="col-"] {
position: static;
}
.page-header .switcher-language {
background-repeat: no-repeat;
background-position: left center;
padding-left: 24px;
}
.page-header .header-top {
background-color: #202020;
color: #d9d9d9;
font-size: 12px;
padding: 7px 0;
}
.page-header .header-middle {
position: relative;
z-index: 5;
}
.page-header .navbar-brand {
padding: 0 35px;
min-width: 240px;
margin: 0;
background-color: #000;
}
.page-header .block-search > a,
.page-header .block-account > a,
.page-header .block-wishlist > a,
.page-header .minicart-wrapper > a {
background-color: #202020;
padding: 0 20px;
text-transform: uppercase;
-webkit-transition: all .256s cubic-bezier(.33,.975,.245,.91);
-moz-transition: all .256s cubic-bezier(.33,.975,.245,.91);
-o-transition: all .256s cubic-bezier(.33,.975,.245,.91);
transition: all .256s cubic-bezier(.33,.975,.245,.91);
}
.page-header .block-search > a i,
.page-header .block-account > a i,
.page-header .block-wishlist > a i,
.page-header .minicart-wrapper > a i {
font-size: 20px;
}
.page-header .block-search > a:hover,
.page-header .block-account > a:hover,
.page-header .block-wishlist > a:hover,
.page-header .minicart-wrapper > a:hover {
background-color: #FF4500;
color: #fff;
}
.page-header .minicart-wrapper > a {
padding: 0 25px;
background-color: #FF4500;
color: #fff;
position: relative;
}
.page-header .minicart-wrapper > a .text {
font-weight: 700;
margin-left: 10px;
}
.page-header .minicart-wrapper > a .qty {
border-left: 1px solid rgba(0,0,0,.21);
margin-left: 10px;
padding-left: 10px;
line-height: 12px;
font-weight: 700;
}
.navbar .dropdown-menu {
margin: 0;
background-color: #121212;
border: 0;
border-radius: 0;
}
.navbar .dropdown-item {
color: #fff;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: transparent;
color: #FF4500;
}
.navbar {
padding: 0;
min-height: 60px;
position: static;
}
.navbar-nav .nav-link {
text-transform: uppercase;
font-weight: 700;
padding: 25px 20px !important;
position: relative;
}
.navbar-nav .nav-link:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
z-index: -1;
transition: 0.5s width;
}
.navbar-nav .nav-link:hover:before {
/* background-color: #FF4500; */
background-color: #FF4500;
width: 100%;
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
background-color: #FF4500;
color: #FFF;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: #FFF;
}
.navbar-dark .navbar-nav .nav-link {
color: #FFF;
}
.navbar-dark .navbar-toggler {
text-transform: uppercase;
border: 0;
color: #fff;
margin: 0;
padding: 6px 15px;
}
.hamburger-menu-icon-small {
display: inline-block;
width: 27px;
vertical-align: middle;
}
.hamburger-menu-icon-small span {
display: block;
height: 3px;
border-top: 3px solid;
}
.hamburger-menu-icon-small span + span {
margin-top: 4px;
}
/* ====================== [ End Header ] ====================== */
/* ====================== [ Start Program ] ====================== */
.program-box {
position: relative;
overflow: hidden;
}
.program-box .program-img {
position: relative;
overflow: hidden;
transform: scale(1);
backface-visibility: hidden;
transition: all 1s cubic-bezier(0.77,0,.175,1);
}
.program-box .program-img .program-cover {
position: relative;
display: block;
width: 100%;
padding-bottom: 100%;
}
.program-box .program-img .program-cover .program-img-main {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
z-index: 0;
}
.program-box .program-img .program-cover .program-img-main img {
object-fit: cover;
object-position: 50% 50%;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
font-family: 'object-fit: cover;';
}
.program-box .program-info {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #FF4500;
text-align: center;
padding: 50px;
flex-flow: column;
opacity: 0;
transition: all 1s cubic-bezier(0.77,0,.175,1);
}
.program-box .program-info h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
color: #fff;
}
.program-box .program-info a {
font-size: 14px;
color: inherit;
font-weight: 500;
}
.program-box:hover .program-img {
transform: scale(1.04);
}
.program-box:hover .program-info {
opacity: 1;
}
.program-box-2 {
position: relative;
overflow: hidden;
text-align: center;
}
.program-box-2 .program-img {
position: relative;
}
.program-box-2 .program-img:before {
content: '';
background: #000;
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.4
}
.program-box-2 .program-img img {
width: 100%;
backface-visibility: visible;
-webkit-transform: scale(1.05) translate3d(0,0,0);
transform: scale(1.05) translate3d(0,0,0);
-webkit-transition: -webkit-transform .7s cubic-bezier(0.77,0,.175,1);
transition: transform .7s cubic-bezier(0.77,0,.175,1);
}
.program-box-2:hover .program-img img {
-webkit-transform: translate3d(0,-8px,0) scale(1.05);
transform: translate3d(0,-8px,0) scale(1.05);
}
.program-box-2 .program-info {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 4em;
}
.program-box-2 .program-info p {
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.program-box-2 .program-info a {
text-transform: uppercase;
color: inherit;
font-size: 12px;
font-weight: 700;
position: relative;
padding-bottom: 8px;
letter-spacing: 1px;
}
.program-box-2 .program-info a:before {
content: '';
position: absolute;
width: 20px;
height: 2px;
border-bottom: 2px solid;
bottom: 0;
left: 0;
transition: all .3s cubic-bezier(0.77,0,.175,1);
}
.program-box-2 .program-info a:hover:before {
width: 100%;
}
/* ====================== [ End Program ] ====================== */
/* ====================== [ Start Product ] ====================== */
.product-box {
text-align: center;
}
.product-box .product-img {
position: relative;
margin-bottom: 20px;
/*display: inline-block;*/
}
.product-box .onsale {
background-color: #FF4500;
color: #fff;
transform: rotate(-90deg) translate3d(-100%,0,0);
transform-origin: left;
position: absolute;
padding: 5px 25px;
font-weight: 700;
letter-spacing: 2px;
font-size: 12px;
text-transform: uppercase;
top: 4px;
left: 36px;
}
.product-box .product-name {
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
}
.product-box del.amount {
margin-left: 10px;
}
/* ====================== [ End Product ] ====================== */
/* ====================== [ Start Team ] ====================== */
.team-box {
text-align: center;
}
.team-box .team-img {
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.team-box .team-overlay {
padding: 25px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0 -190px 145px -145px rgba(40, 40, 40, 0.8) inset;
box-shadow: 0 -190px 145px -145px rgba(40, 40, 40, 0.8) inset;
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
-o-transition-property: opacity, transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
}
.team-box .team-subtitle {
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
}
.team-box:hover .team-overlay {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.team-box .socialbar a {
font-size: 16px;
width: 30px;
height: 30px;
display: inline-block;
color: #fff;
border: 1px solid;
border-radius: 50%;
line-height: 28px;
text-align: center;
}
/* ====================== [ End Team ] ====================== */
/* ====================== [ Start Pricing ] ====================== */
.pricing-box {
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
background-color: #fff;
}
.pricing-box .pricing-badge {
display: inline-block;
background-color: rgba(77, 69, 246, 0.1);
color: #FF4500;
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
padding: 2px 15px;
border-radius: 50px;
}
/* ====================== [ End Pricing ] ====================== */
/* ====================== [ Start Footer ] ====================== */
.page-footer .coupon-box {
position: relative;
border: 3px dashed;
padding: 8px 15px;
text-transform: uppercase;
max-width: 260px;
text-align: center;
}
.page-footer .coupon-box .coupon-box-icon {
position: absolute;
font-size: 30px;
line-height: 1;
background-color: #1d1d1d;
top: -16px;
left: -3px;
}
.page-footer .coupon-box .coupon-box-text {
font-weight: 700;
}
.page-footer .footer-copyright {
background-color: #202020;
}
/* ====================== [ End Footer ] ====================== */
/* ====================== [ Start Testimonial ] ====================== */
.testimonial-box {
text-align: center;
}
.testimonial-box .testimonial-img {
margin-bottom: 20px;
}
.testimonial-box blockquote {
max-width: 450px;
display: inline-block;
}
.testimonial-box .testimonial-subtitle {
font-size: 14px;
}
/* ====================== [ End Testimonial ] ====================== */
/* ====================== [ Start Blog ] ====================== */
.blog-box .blog-img {
position: relative;
margin-bottom: 20px;
overflow: hidden;
}
.blog-box .blog-img a {
display: block;
}
.blog-box .blog-posed-date {
position: absolute;
background-color: #FF4500;
color: #fff;
left: 0;
bottom: 0;
text-transform: uppercase;
font-weight: 700;
padding: 11px 20px;
opacity: 0;
transform: translateY(10px);
transition: all .3s ease;
}
.blog-box .blog-categories {
margin-bottom: 10px;
}
.blog-box .blog-categories a,
.blog-view .blog-categories a {
background-color: #FF4500;
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
padding: 0px 10px;
margin: 0 4px 4px 0;
display: inline-block;
}
.blog-box .blog-links {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
}
.blog-box .blog-links .blog-read-more,
.blog-box .blog-links .blog-comment {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
position: relative;
padding-bottom: 8px;
letter-spacing: 1px;
margin-right: 20px;
}
.blog-box .blog-links .blog-read-more:before,
.blog-box .blog-links .blog-comment:before {
content: '';
position: absolute;
width: 20px;
height: 2px;
border-bottom: 2px solid;
bottom: 0;
left: 0;
transition: all .3s cubic-bezier(0.77,0,.175,1);
}
.blog-box .blog-links .blog-read-more:hover:before,
.blog-box .blog-links .blog-comment:hover:before {
width: 100%;
}
.blog-box .blog-links .blog-social-share a {
display: inline-block;
font-size: 18px;
color: #c7c7c7;
transition: color .3s;
margin-right: 10px;
}
.blog-box .blog-links .blog-social-share a:hover {
color: #000;
}
.blog-box:hover .blog-posed-date {
opacity: 1;
transform: translateY(0);
}
.blog-view .blog-header,
.blog-view .narrow-content,
.blog-view .blog-nextprev,
.blog-view .blog-comments {
max-width: 830px;
margin-left: auto;
margin-right: auto;
}
.blog-view .blog-header {
margin-bottom: 35px;
}
.blog-view .blog-nextprev,
.blog-view .blog-content {
margin-bottom: 80px;
}
.blog-view .blog-image-caption {
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
.blog-view blockquote {
max-width: 80%;
margin-left: auto;
margin-right: auto;
padding: 60px 0;
position: relative;
}
.blog-view blockquote:before,
.blog-view blockquote:after {
content: '';
background-color: #FF4500;
display: block;
width: 80px;
height: 3px;
position: absolute;
left: 50%;
margin-left: -40px;
}
.blog-view blockquote:before {
top: 0;
}
.blog-view blockquote:after {
bottom: 0;
}
.blog-view blockquote h1,
.blog-view blockquote h2,
.blog-view blockquote h3,
.blog-view blockquote h4,
.blog-view blockquote h5,
.blog-view blockquote h6,
.blog-view blockquote .h1,
.blog-view blockquote .h2,
.blog-view blockquote .h3,
.blog-view blockquote .h4,
.blog-view blockquote .h5,
.blog-view blockquote .h6 {
line-height: 1.5;
}
.blog-view .blog-tags a {
background-color: #1d1d1d;
color: #fff;
font-size: 14px;
text-transform: lowercase;
font-weight: 700;
padding: 0px 10px;
margin: 0 4px 4px 0;
display: inline-block;
}
.blog-view .blog-comment-box {
padding: 40px 0;
}
.blog-view .blog-comment-box + .blog-comment-box {
border-top: 1px solid #e3e3e3;
}
.blog-view .blog-comment-text {
margin-bottom: 20px;
}
.blog-view .blog-comment-main {
border-left: 4px solid #FF4500;
padding-left: 30px;
}
.blog-view .blog-comment-reply-link {
font-size: 14px;
}
.blog-view .blog-comment-reply-link .comment-reply-link {
text-transform: uppercase;
font-weight: 700;
margin-right: 5px;
}
.blog-box-2 {
color: #fff;
min-height: 400px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
}
.blog-box-2 .blog-img:before {
content: '';
background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.6) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.6) 100%);
z-index: 1;
width: 100%;
height: 100%;
display: block;
position: absolute;
bottom: 0;
left: 0;
transition: opacity .3s;
opacity: .7;
}
.blog-box-2 .blog-img a {
display: block;
}
.blog-box-2 .bt-blog-img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-box-2 .blog-content {
padding: 30px;
position: relative;
z-index: 2;
transform: translateY(52px);
transition: transform .3s;
}
.blog-box-2 .blog-content .blog-categories {
margin-bottom: 13px;
}
.blog-box-2 .blog-content .blog-categories a {
background-color: #1d1d1d;
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
padding: 0px 10px;
margin: 0 4px 4px 0;
display: inline-block;
}
.blog-box-2 .blog-content .blog-title {
margin-bottom: 20px;
font-size: 28px;
}
.blog-box-2 .blog-links {
opacity: 0;
transition: opacity .3s;
}
.blog-box-2 .blog-links .blog-read-more,
.blog-box-2 .blog-links .blog-comment {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
position: relative;
padding-bottom: 8px;
letter-spacing: 1px;
margin-right: 20px;
}
.blog-box-2:hover .blog-content {
transform: translateY(0);
}
.blog-box-2:hover .blog-links {
opacity: 1;
}
@media (min-width: 768px) {
.blog-box-2 {
min-height: 600px;
}
.blog-box-2 .blog-content {
padding: 60px;
}
}
@media (min-width: 1200px) {
.blog-box-2 .blog-content .blog-title {
font-size: 50px;
}
}
/* ====================== [ End Blog ] ====================== */
/* ====================== [ Start Instagram ] ====================== */
.instagram-box {
position: relative;
overflow: hidden;
}
.instagram-box .instagram-item-link {
display: block;
}
.instagram-box .instagram-item-link .image-wrapper {
overflow: hidden;
transition: all .3s;
}
.instagram-box .instagram-item-link .image-wrapper img {
transition: all .3s;
}
.instagram-box .instagram-item-link:hover .image-wrapper img {
transform: scale(.96);
}
.instagram-box .instagram-item-link .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.instagram-box .instagram-item-link .action {
font-size: 18px;
background: #000;
color: #fff;
width: 42px;
height: 42px;
line-height: 42px;
text-align: center;
display: block;
transform: translateY(10px);
opacity: 0;
visibility: hidden;
animation: move-action-bottom .15s cubic-bezier(.33,.975,.245,.91) forwards;
transition: all .6s ease-in-out;
}
.instagram-box .instagram-item-link:hover .action {
visibility: visible;
animation: move-action-top .15s cubic-bezier(.33,.975,.245,.91) forwards;
}
.instagram-box .instagram-item-link:hover .action.view {
animation-delay: .1s;
}
@keyframes move-action-top {
0% {
transform: translateY(10px);
opacity: 0
}
100% {
transform: translateY(0px);
opacity: 1
}
}
@keyframes move-action-bottom {
0% {
transform: translateY(0px);
opacity: 1
}
100% {
transform: translateY(10px);
opacity: 0
}
}
/* ====================== [ End Instagram ] ====================== */
/* ====================== [ Start Timeline ] ====================== */
.timeline-box {
text-align: center;
}
.timeline-box .timeline-label {
position: relative;
border-bottom: 1px solid #ddd;
margin-bottom: 3rem;
}
.timeline-box .timeline-label label {
margin: 0;
font-size: 14px;
padding: 17px 40px;
}
.timeline-box .timeline-label:after {
content: '';
width: 1px;
height: 30px;
background-color: #ddd;
left: 50%;
top: 70px;
display: block;
margin: 10px auto 15px auto;
}
.timeline-box .timeline-label:before {
content: '';
background-color: #ddd;
width: 10px;
height: 10px;
display: block;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: -5px;
margin-left: -5px;
}
.process {
position: relative;
}
.process .number {
color: #ebebeb;
font-weight: 900;
font-size: 100px;
line-height: 1;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.process h4 {
padding: 40px 0;
margin: 0;
}
/* ====================== [ End Timeline ] ====================== */
/* ====================== [ Start Video-module(Trainer page) ] ====================== */
.video-module {
position: relative;
}
.video-module .btn-play {
border: 1px solid #FF4500;
font-size: 30px;
background-color: #FF4500;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.video-module.with-anim .btn-play:after,
.video-module.with-anim .btn-play:before {
content: '';
border: 1px solid;
border-color: inherit;
width: 150%;
height: 150%;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
left: -25%;
top: -25%;
opacity: 1;
-webkit-animation: 1s videomodule-anim linear infinite;
animation: 1s videomodule-anim linear infinite;
}
.video-module.with-anim .btn-play:before {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@-webkit-keyframes videomodule-anim {
0% {
-webkit-transform: scale(0.68);
transform: scale(0.68);
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
}
@keyframes videomodule-anim {
0% {
-webkit-transform: scale(0.68);
transform: scale(0.68);
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
}
/* ====================== [ End Video-module(Trainer page) ] ====================== */
/* ====================== [ Start FAQ's ] ====================== */
.faq-box + .faq-box {
border-top: 1px solid rgba(0,0,0,.08);
}
.faq-box .faq-title a {
display: block;
padding: 25px 0 25px 30px;
position: relative;
}
.faq-box .faq-title a:before,
.faq-box .faq-title a:after {
content: '';
display: block;
position: absolute;
}
.faq-box .faq-title a:before {
left: 2px;
top: 50%;
width: 12px;
height: 2px;
margin-top: -1px;
border-top: 2px solid;
}
.faq-box .faq-title a.collapsed:after {
left: 7px;
top: 50%;
width: 2px;
height: 12px;
margin-top: -6px;
border-left: 2px solid;
}
.faq-box .faq-content {
padding: 0 0 25px 0;
}
/* ====================== [ End FAQ's ] ====================== */
/* ====================== [ Start Image Hover Effect ] ====================== */
.hover-effect-img {
display: block;
backface-visibility: hidden;
}
.img-hover-effect-zoomin {
overflow: hidden;
}
.img-hover-effect-zoomin img {
transition: transform .3s ease;
transform: scale(1);
}
.img-hover-effect-zoomin:hover img {
transform: scale(1.1);
}
.img-hover-effect-zoomout {
overflow: hidden;
}
.img-hover-effect-zoomout img {
transition: transform .3s ease;
transform: scale(1.1);
}
.img-hover-effect-zoomout:hover img {
transform: scale(1);
}
.img-hover-effect-move-right {
overflow: hidden
}
.img-hover-effect-move-right img {
transition: transform .3s ease;
transform: scale(1.1) translateX(0)
}
.img-hover-effect-move-right:hover img {
transform: scale(1.1) translateX(3%)
}
.img-hover-effect-move-left {
overflow: hidden;
}
.img-hover-effect-move-left img {
transition: transform .3s ease;
transform: scale(1.1) translateX(0);
}
.img-hover-effect-move-left:hover img {
transform: scale(1.1) translateX(-3%);
}
.img-hover-effect-move-up {
overflow: hidden;
}
.img-hover-effect-move-up img {
transition: transform .3s ease;
transform: scale(1.1) translateY(0);
}
.img-hover-effect-move-up:hover img {
transform: scale(1.1) translateY(-3%);
}
.img-hover-effect-move-down {
overflow: hidden;
}
.img-hover-effect-move-down img {
transition: transform .3s ease;
transform: scale(1.1) translateY(0);
}
.img-hover-effect-move-down:hover img {
transform: scale(1.1) translateY(-3%);
}
.img-hover-effect-up {
transition: transform .3s ease;
}
.img-hover-effect-up:hover {
transform: translateY(-.5em);
}
.img-hover-effect-opacity img {
transition: opacity .3s ease;
}
.img-hover-effect-opacity:hover img {
opacity: .66;
}
.img-hover-effect-opacity-reverse img {
opacity: .66;
transition: opacity .3s ease;
}
.img-hover-effect-opacity-reverse:hover img {
opacity: 1;
}
.img-hover-effect-greyscale img {
transition: filter .3s ease;
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
.img-hover-effect-greyscale:hover img {
filter: none;
-webkit-filter: grayscale(0);
}
.img-hover-effect-to-greyscale img {
transition: filter .3s ease;
filter: none;
-webkit-filter: grayscale(0);
}
.img-hover-effect-to-greyscale:hover img {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
/* ====================== [ End Image Hover Effect ] ====================== */
/* ====================== [ Start Category page ] ====================== */
.layered-filter-block .filter-options-item {
padding: 20px;
margin-bottom: 20px;
border-top: 6px solid #FF4500;
background-color: #f8f8f8;
}
.layered-filter-block .filter-options-content {
font-size: 14px;
margin-top: 15px;
}
.filter-content .item {
margin: 10px 0;
}
.filter-options-content a {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sidebar {
margin-bottom: 20px;
}
.sidebar.sidebar-additional .block {
padding: 20px;
margin-bottom: 20px;
border-top: 6px solid #FF4500;
background-color: #f8f8f8;
}
.sidebar.sidebar-additional .block .block-content {
margin-top: 15px;
}
.sidebar.sidebar-additional .product-item {
margin-bottom: 20px;
}
.sidebar.sidebar-additional .product-item:last-child {
margin-bottom: 0;
}
.sidebar .product-box {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
text-align: left;
font-size: 14px;
}
.sidebar .product-box .product-img {
max-width: 80px;
margin-bottom: 0;
margin-right: 15px;
}
.sidebar .product-box .product-name {
font-size: 14px;
margin-bottom: 4px;
}
/* ====================== [ End Category page ] ====================== */
/* ====================== [ Start Product page ] ====================== */
.product-info-price {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
}
.product-reviews-summary {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
font-size: 12px;
}
.product-reviews-summary .rating-summary .rating-result {
font-size: 14px;
background-color: rgb(245, 245, 245);
padding: 2px 7px;
}
.product-reviews-summary .reviews-actions a {
margin-left: 10px;
}
.product.info.detailed .data.item.title {
border-top: 1px solid rgba(0,0,0,.08);
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.product.info.detailed .data.item.title a {
padding: 20px 20px 20px 30px;
display: block;
position: relative;
}
.product.info.detailed .data.item.title a:before,
.product.info.detailed .data.item.title a:after {
content: '';
display: block;
position: absolute;
}
.product.info.detailed .data.item.title a:before {
left: 2px;
top: 50%;
width: 12px;
height: 2px;
margin-top: -1px;
border-top: 2px solid;
}
.product.info.detailed .data.item.title a.collapsed:after {
left: 7px;
top: 50%;
width: 2px;
height: 12px;
margin-top: -6px;
border-left: 2px solid;
}
.product-options-wrapper,
.product-add-form {
margin-bottom: 40px;
}
.swatch-attribute-label,
.swatch-attribute-selected-option {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.swatch-attribute {
margin-bottom: 12px;
}
.swatch-attribute-selected-option {
margin-left: 10px;
}
.swatch-attribute-options {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swatch-option {
font-size: 13px;
font-weight: 700;
min-width: 40px;
min-height: 40px;
line-height: 24px;
padding: 8px;
box-shadow: inset 0 0 0 1px #d2d2d2;
text-align: center;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
transition: all 10ms ease-in-out;
}
.swatch-option.color {
min-height: 50px;
min-width: 50px;
background-repeat: no-repeat;
box-shadow: none;
}
.swatch-option.selected,
.swatch-option:hover {
box-shadow: inset 0 0 0 1px #000;
}
.swatch-option.color.selected {
box-shadow: inset 0 0 0 3px #000;
}
.box-tocart {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.box-tocart .qty {
position: relative;
padding-right: 5px;
}
.qty-minus,
.qty-plus {
width: 34px;
height: 50px;
cursor: pointer;
display: block;
position: absolute;
}
.qty-plus {
right: 0;
}
.qty-minus:before,
.qty-plus:before {
content: '';
display: block;
position: absolute;
background: #000;
left: calc(50% - 4px);
top: calc(50% - 1px);
width: 8px;
height: 2px;
}
.qty-plus:after {
content: '';
display: block;
position: absolute;
background: #000;
left: calc(50% - 1px);
top: calc(50% - 4px);
width: 2px;
height: 8px;
}
.box-tocart .qty .form-control {
width: 125px;
height: 50px;
text-align: center;
background-color: #f4f4f4;
font-weight: 700;
font-size: 20px;
color: #000;
padding-left: 35px;
padding-right: 35px;
border: none;
}
.product.info.detailed .data.item.content {
font-size: 14px;
padding: 6px 2px 30px 0;
}
.review-item {
border-bottom: 1px solid #e3e3e3;
padding: 35px 0;
}
.review-item:last-child {
border-bottom: 0;
}
.review-items .review-item {
font-size: 13px;
}
.review-details {
margin-bottom: 15px;
}
.review-author {
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0;
}
.review-ratings {
margin-bottom: 15px;
}
.rating-summary {
line-height: 1;
margin: 5px 0;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justif;
justify-content: space-between;
}
.review-list .rating-summary .rating-label {
font-weight: 700;
text-transform: uppercase;
}
.review-list .rating-summary .rating-result {
letter-spacing: -1px;
}
.review-title {
font-size: 20px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 5px;
}
.review-field-rating {
line-height: 1;
margin: 5px 0;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justif;
justify-content: space-between;
}
.review-field-rating .rating-label {
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
}
.review-field-rating .review-control-vote {
font-size: 24px;
letter-spacing: -3px;
}
/* ====================== [ End Product page ] ====================== */
/* ====================== [ Start Pie Chart Module(Trainer page) ] ====================== */
.pie-chart {
position: relative;
}
.pie-chart .pie-chart-counter {
font-size: 64px;
font-weight: 700;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* ====================== [ End Pie Chart Module(Trainer page) ] ====================== */
/* ====================== [ Start Shopping Cart page ] ====================== */
.cart-summary {
font-size: 14px;
}
.cart-summary .block-title,
.opc-block-summary .block-title {
border-top: 1px solid #d1d1d1;
}
.cart-summary .block-title h5,
.opc-block-summary .block-title h5 {
font-size: 18px;
}
.cart-summary .block-title a,
.opc-block-summary .block-title a {
display: block;
padding: 30px 30px 30px 0;
position: relative;
}
.cart-summary .block-title a:before,
.cart-summary .block-title a:after,
.opc-block-summary .block-title a:before,
.opc-block-summary .block-title a:after {
content: '';
display: block;
position: absolute;
}
.cart-summary .block-title a:before,
.opc-block-summary .block-title a:before {
right: 2px;
top: 50%;
width: 12px;
height: 2px;
margin-top: -1px;
border-top: 2px solid;
}
.cart-summary .block-title a.collapsed:after,
.opc-block-summary .block-title a.collapsed:after {
right: 7px;
top: 50%;
width: 2px;
height: 12px;
margin-top: -6px;
border-left: 2px solid;
}
.cart-summary .cart-totals {
border-top: 1px solid #d1d1d1;
padding: 20px 0;
}
.shopping-cart-table thead {
font-size: 14px;
}
.shopping-cart-table.table th {
padding-top: 23px;
padding-bottom: 23px;
text-align: center;
}
.shopping-cart-table.table td {
padding-top: 30px;
padding-bottom: 30px;
}
.shopping-cart-table.table td,
.shopping-cart-table.table th {
vertical-align: middle;
}
.shopping-cart-table tbody {
border-bottom: 1px solid #e5e5e5 !important;
}
.shopping-cart-table .item-info .actions {
font-size: 22px;
}
@media (max-width: 767px) {
.shopping-cart-table thead {
display: none;
}
.shopping-cart-table.table td {
padding-top: 15px;
padding-bottom: 15px;
}
.item-info {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
align-items: center;
}
.shopping-cart-table.table .price[data-th]:before,
.shopping-cart-table.table .subtotal[data-th]:before {
content: attr(data-th) ':';
display: block;
font-weight: 700;
padding-bottom: 0;
font-size: 13px;
text-transform: uppercase;
}
.item-info .item,
.item-info .price,
.item-info .qty,
.item-info .subtotal {
position: relative;
width: 100%;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.item-info .item {
width: 100%;
min-width: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 40px !important;
}
.item-info .price {
text-align: left;
padding-left: 0;
}
.item-info .qty {
text-align: center;
}
.item-info .subtotal {
text-align: right;
padding-right: 0;
}
.item-info .actions {
position: absolute;
display: block;
right: 5px;
top: 30px;
padding: 0 !important;
width: 30px;
height: 30px;
text-align: center;
}
}
/* ====================== [ End Shopping Cart Page ] ====================== */
/* ====================== [ Start Checkout page ] ====================== */
.table-checkout-shipping-method {
font-weight: 700;
font-size: 14px;
}
.table-checkout-shipping-method.table td,
.table-checkout-shipping-method.table th {
padding-top: 20px;
padding-bottom: 20px;
}
.table-checkout-shipping-method.table tbody td:first-child {
padding-left: 28px;
}
.table-checkout-shipping-method tbody tr {
border-top: 5px solid #fff;
}
.table-checkout-shipping-method tbody tr:first-child {
border-top: 0;
}
/* ====================== [ End Checkout page ] ====================== */
/* ====================== [ Start Responsive ] ====================== */
@media (max-width: 1199px) {
.navbar-collapse {
background-color: #121212;
position: absolute;
left: 0;
right: 0;
top: 100%;
}
.navbar-toggler {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
align-self: stretch;
}
}
@media (max-width: 767px) {
.page-header .navbar-brand {
min-width: auto;
padding: 0 15px;
}
.page-header .minicart-wrapper > a .text {
display: none;
}
.page-header .minicart-wrapper > a .qty {
border-left: 0;
margin: 0;
background-color: #121212;
position: absolute;
right: 0;
top: 0;
font-size: 12px;
min-height: 16px;
min-width: 16px;
text-align: center;
line-height: 8px;
padding: 4px;
display: block;
}
}
@media (max-width: 575px) {
.page-header .block-search > a,
.page-header .block-account > a,
.page-header .block-wishlist > a,
.page-header .minicart-wrapper > a {
padding: 0 15px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1700px) {
.container {
max-width: 1400px;
}
}
/* ====================== [ End Responsive ] ====================== */