/* ---------------------------------------------------------------- Canvas: Gym -----------------------------------------------------------------*/ @media (min-width: 992px) { .slider-caption { min-width: 650px; } #header.sticky-on-upscroll #header-wrap { -webkit-transition: height .4s ease, opacity .4s ease, top .4s ease; -o-transition: height .4s ease, opacity .4s ease, top .4s ease; transition: height .4s ease, opacity .4s ease, top .4s ease; -webkit-backface-visibility: hidden; } #header.sticky-on-upscroll.sticky-header #header-wrap { top: -60px; } #header.sticky-on-upscroll.show-sticky-onscroll.sticky-header #header-wrap { top: 0px; } } .menu-link { font-size: 0.9375rem; font-weight: 400 !important; text-transform: capitalize; font-family: 'Poppins', sans-serif !important; } @media (min-width: 992px) { .menu-link { padding-left: 20px; padding-right: 20px; } } .sub-menu-container .menu-item > .menu-link { font-size: 0.875rem; } .sub-menu-container .menu-item:hover > .menu-link { padding-left: 25px; } .slider-caption { margin-top: -20px; } .bg-color, .bg-color #header-wrap { background-color: #1E8C93 !important; } .bg-color .menu-item:hover > .menu-link, .bg-color .menu-item.current > .menu-link { color: #444 !important; } /* Pricing table */ .pricing-box { padding: 30px; background-color: #FFF; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08); } .pricing-title { background-color: transparent; border-bottom: 0; } .pricing-title h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0; } .pricing-price::after, .pricing-features { font-family: 'Poppins', sans-serif; } .pricing-price, .pricing-price span { font-weight: 600; } .pricing-price span { margin: 3px 5px 0 0; font-size: 22px; } .pricing-price span.price-tenure { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 10px 0 0 0; text-align: center; color: #888; letter-spacing: 1px; } .pts-switcher input.switch-toggle-round + label::before, .pts-switcher input.switch-toggle-round + label { background-color: #1E8C93; } .pts-switcher input.switch-toggle-round + label::after { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #modal-get-started-package { margin-top: 6px; text-align: right; line-height: 24px; font-size: 13px; font-weight: 600; color: #AAA; text-transform: uppercase; letter-spacing: 1px; } /* Pricing table End */ /* .twentytwenty-horizontal */ .twentytwenty-horizontal .twentytwenty-handle::before, .twentytwenty-horizontal .twentytwenty-handle::after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle::before, .twentytwenty-horizontal .twentytwenty-handle::after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .twentytwenty-before-label, .twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .twentytwenty-before-label::before, .twentytwenty-after-label::before { color: white; font-size: 13px; letter-spacing: 0.1em; } .twentytwenty-before-label::before, .twentytwenty-after-label::before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .twentytwenty-horizontal .twentytwenty-before-label::before, .twentytwenty-horizontal .twentytwenty-after-label::before { top: 50%; margin-top: -19px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; } .twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: auto; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; } .twentytwenty-container img { max-width: 100%; position: absolute; top: 0; display: block; } .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active:hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); } .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; } .twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .twentytwenty-before-label { opacity: 0; } .twentytwenty-before-label::before { content: "Before"; } .twentytwenty-after-label { opacity: 0; } .twentytwenty-after-label::before { content: "After"; } .twentytwenty-horizontal .twentytwenty-before-label::before { left: 10px; } .twentytwenty-horizontal .twentytwenty-after-label::before { right: 10px; } .twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5); } .twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; } .twentytwenty-overlay:hover .twentytwenty-before-label { opacity: 1; } .twentytwenty-before { z-index: 20; } .twentytwenty-after { z-index: 10; } .twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; background-color: #FFF; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; } .twentytwenty-horizontal .twentytwenty-handle::before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle::after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow { border-right: 6px solid #999; left: 50%; margin-left: -17px; } .twentytwenty-right-arrow { border-left: 6px solid #999; right: 50%; margin-right: -17px; } /* twentytwenty-horizontal End */ .masonry-thumbs a i { opacity: 0; position: absolute; display: block; top: 50%; left: 50%; color: rgba(255, 255, 255, 0.7); z-index: 99; background-color: rgba(0, 0, 0, 0.65); padding: 5px; font-size: 14px; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; line-height: 30px; text-align: center; border-radius: 50%; -webkit-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: transform .4s ease; -o-transition: transform .4s ease; transition: transform .4s ease; -webkit-backface-visibility: hidden; } .masonry-thumbs a:hover i { opacity: 1; -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .button-border-icon { background-color: transparent !important; } .button-border-icon i { margin-right: 0; border-radius: 50%; border: 1px solid #DDD; width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: transparent !important; } .button-border-icon i::before { position: relative; font-size: 16px; left: 2px; } .button-border-icon span { margin-left: 0.75rem; } @media (max-width: 575px) { .slider-arrow-left, .slider-arrow-right { top: auto; right: 0; background-color: #000; bottom: 0; margin-top: 0; width: 52px; height: 52px; border: 0; border-radius: 0 3px 3px 0; } .slider-arrow-left { left: auto; right: 52px; } } /* Slider Area -----------------------------------------------------------------*/ .slider-caption h2 { text-transform: none; letter-spacing: 0; font-size: 62px; line-height: 1.1; font-weight: 700; } .slider-caption h2, .slider-caption .categories-lists, .slider-caption .button { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: 50% 50% 0px; transform-origin: 50% 50% 0px; -webkit-transition: -webkit-transform .05s ease-out; transition: -webkit-transform .05s ease-out; transition: transform .05s ease-out; transition: transform .05s ease-out, -webkit-transform .05s ease-out; backface-visibility: hidden; } .swiper-slide.swiper-slide-active .slider-caption h2, .swiper-slide.swiper-slide-active .slider-caption .categories-lists, .swiper-slide.swiper-slide-active .slider-caption .button { opacity: 1; -webkit-transition: transform 1.5s, opacity 1.55s; -o-transition: transform 1.5s, opacity 1.55s; transition: transform 1.5s, opacity 1.55s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); backface-visibility: hidden; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .swiper-slide.swiper-slide-active .slider-caption .categories-lists { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .swiper-slide.swiper-slide-active .slider-caption .button { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .slider-arrow-left i, .slider-arrow-right i { font-size: 30px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-transform: scale(1); transform: scale(1); } .slider-arrow-left, .slider-arrow-right { border: 0; border-radius: 0 3px 3px 0; } .slider-arrow-left:hover, .slider-arrow-right:hover { background-color: transparent !important; } .slider-arrow-left i:hover, .slider-arrow-right i:hover { -webkit-transform: scale(1.15); transform: scale(1.15); } @-webkit-keyframes scrollDown { 0% { top: 10px; opacity: 0; } 15% { top: 10px; opacity: 1; } 30% { top: 10px; opacity: 1; } 45% { top: 28px; opacity: 1; } 100% { top: 28px; opacity: 0; } } @keyframes scrollDown { 0% { top: 10px; opacity: 0; } 15% { top: 10px; opacity: 1; } 30% { top: 10px; opacity: 1; } 45% { top: 28px; opacity: 1; } 100% { top: 28px; opacity: 0; } } .scroll-down { position: absolute; top: auto; bottom: 20px; left: 50%; display: inline-block; width: auto; margin: 0 auto; text-align: center; background-color: transparent; border: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 9; opacity: .8; } .scroll-mouse { position: relative; display: inline-block; width: 28px; height: 46px; margin: 0 auto; border: 2px solid #fff; border-radius: 20px; } .scroll-wheel { position: absolute; top: 14px; left: 10px; width: 4px; height: 4px; background-color: #fff; border-radius: 50%; -webkit-animation: scrollDown 2.5s infinite; animation: scrollDown 2.5s infinite; } .svg-discount { position: absolute; display: block; opacity: .7; top: 0; right: 50%; margin-top: -15px; margin-right: -190px; background: url(../fonts/discount.svg) no-repeat 0 0,-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)); background: url(../fonts/discount.svg) no-repeat 0 0,-moz-linear-gradient(transparent,transparent); background: url(../fonts/discount.svg) no-repeat 0 0,linear-gradient(transparent,transparent); width: 60px; height: 39px; } .price-label { width: 80px; height: 80px; position: absolute; top: -1px; right: -1px; text-align: center; border-top-right-radius: 3px; background: #EF4368; } .price-label::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 80px 0 0 80px; border-color: transparent transparent transparent #FFF; } .price-label span { position: absolute; top: 22px; right: 3px; text-transform: uppercase; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); font-weight: 700; font-size: 10px; color: #FFF; letter-spacing: 1px; }