/* * Author: Kiri Siva * Author URL: https://www.klarconcepts.com * Name: Just B Fitness * Version: 1.1 (2020) * License: GrafiXpert * * Table of Contents ----------------- 00. KIRI'S CUSTOM CODES 01. GENERAL 1.1. General 1.2. Overlays 1.3. Grid 1.4. Section 1.5. Format 1.6. Disable Selection 1.7. JustBFitness Cursor 02. TYPOGRAPHY 03. FORMS AND FIELDS 04. HEADER 4.1. Header 4.2. Logo 4.3. Navigation 4.4. Main Menu 05. CONTENT 5.1. Content 5.2. Page Title 5.3. Back Button 5.3.1. Back Button 5.3.2. Before Load State 5.3.3. Normal State 5.3.4. Hover State 5.3.5. Remove to Inactive State 06. FOOTER 07. ASIDE BAR 7.1. Aside 7.2. Aside Widgets 7.2.1. Aside Widgets 7.2.2. About Widget 7.2.3. Contacts Widget 08. HOME TEMPLATE 09. ALBUMS LISTING 9.1. Albums Listing 9.2. Albums Grid 9.3. Albums Carousel 9.4. Albums Slider 9.4.1. Albums Slider 9.4.2. Slide Button 9.4.3. Slide Title 9.4.4. Slider Navigation 10. ALBUMS POSTS 10.1. Albums Posts 10.2. Bricks Layout 10.3. Adjusted 11. ELEMENTS 11.1. Elements 11.2. Contact Elements 11.3. Services Block 11.4. Testimonials Grid 11.5. Testimonials Carousel 11.6. Maintenance Page 11.7. JustBFitness Kenburns 11.8. Counter Item 11.9. JustBFitness Before After * ****************************************/ /* 00. KIRI'S CUSTOM CODES ----------- */ /* text size */ .text-extra-small {font-size:11px; line-height:14px} .text-small {font-size:12px; line-height:20px} .text-extra-medium {font-size:14px; line-height:23px} .text-medium {font-size:16px; line-height:23px} .text-large {font-size:18px; line-height:26px} .text-extra-large {font-size: 20px; line-height:26px} .title-large {font-size: 100px; line-height:95px} .title-extra-large {font-size: 130px; line-height:120px} /* text color */ .text-white {color:#FFF} .text-black {color:#000} .text-instagram {color:#FD1D1D} .text-facebook {color:#3b5998} .text-extra-dark-gray, .c-dgray2 {color:#1B2021} .text-dark-gray {color:#626262} .text-extra-medium-gray {color:#757575} .text-medium-gray {color:#939393} .text-extra-light-gray {color:#b7b7b7} .text-light-gray {color:#d6d5d5} .text-very-light-gray {color:#ededed} .text-deep-pink {color:#ff214f} .text-orange {color:#F04C23} .text-green {color:#65d340} /* text link hover color */ a.text-link-white, a.text-link-white i {color:#ffffff} a.text-link-white:hover, a.text-link-white:hover i, a.text-link-white:focus, a.text-link-white:focus i {color:#F04C23} a.text-link-white2, a.text-link-white2 i {color:#ffffff} a.text-link-white2:hover, a.text-link-white2:hover i, a.text-link-white2:focus, a.text-link-white2:active i {color:#383838} a.text-link-white3, a.text-link-white3 i {color:#ffffff; font-weight: 500;} a.text-link-white3:hover, a.text-link-white3:hover i, a.text-link-white3:focus, a.text-link-white3:active i {color:#4F4F4F; } a.text-link-black, a.text-link-black i {color:#000000} a.text-link-dark-gray {color:#939393} a.text-link-dark-gray:hover, .text-link-dark-gray:focus {color:#383838} a.text-link-extra-dark-gray {color:#383838} a.text-link-extra-dark-gray:hover, a.text-link-extra-dark-gray:focus {color:#FFFFFF} a.text-link-deep-pink, a.text-link-deep-pink i {color:#ff214f} a.text-link-deep-pink:hover, a.text-link-deep-pink:hover i, a.text-link-deep-pink:focus, a.text-link-deep-pink:focus i {color:#fff} a.text-link-orange, a.text-link-orange i {color:#F04C23} a.text-link-orange:hover, a.text-link-orange:hover i, a.text-link-orange:focus, a.text-link-orange:focus i {color:#ffffff} a.text-link-orange2, a.text-link-orange2 i {color:#F04C23} a.text-link-orange2:hover, a.text-link-orange2:hover i, a.text-link-orange2:focus, a.text-link-orange2:focus i {color:#383838} /* hover color */ a.text-white-hover:hover, a.text-white-hover:focus {color:#fff !important;} a.text-black-hover:hover, a.text-black-hover:focus {color:#000 !important;} a.text-deep-pink-hover:hover, a.text-deep-pink-hover:focus {color:#ff214f !important;} a.text-orange:hover, a.text-orange-hover:focus {color:#F04C23 !important;} a.text-extra-dark-gray-hover:hover, a.c-dgray2:hover {color:#383838 !important;} a.text-dark-gray-hover:hover {color:#626262 !important;} a.text-extra-medium-gray-hover:hover {color:#757575 !important;} a.text-medium-gray-hover:hover {color:#939393 !important;} a.text-extra-light-gray-hover:hover {color:#b7b7b7 !important;} a.text-light-gray-hover:hover {color:#d6d5d5 !important;} a.text-very-light-gray-hover:hover {color:#ededed !important;} /* =================================== Background color ====================================== */ .bg-transparent {background-color: transparent;} .bg-white {background-color:#fff;} .bg-black {background-color:#000;} .bg-extra-dark-gray {background-color:#383838;} .bg-dark-gray {background-color:#757575;} .bg-extra-medium-gray {background-color:#939393;} .bg-medium-gray {background-color:#dbdbdb;} .bg-extra-light-gray {background-color:#e0e0e0} .bg-medium-light-gray {background-color:#ededed} .bg-light-gray {background-color:#f7f7f7} .bg-very-light-gray {background-color:#fafafa} .bg-deep-pink {background-color:#ff214f;} .bg-orange {background-color:#F04C23;} .bg-blue {background-color:#162dde;} .bg-green {background-color:#65d340;} .bg-red {background-color:#FF0000;} .bg-purple {background-color:#8e2fd0;} .bg-fuchsia {background-color:#DD63AE;} .bg-transparent-white { background-color: rgba(255,255,255,0.3); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(37%, rgba(255,255,255,0)), color-stop(96%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); } .bg-transparent-black { background-color: rgba(0,0,0,0); background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(37%, rgba(0,0,0,0)), color-stop(96%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 ); } .bg-white-opacity { background-color: rgba(255, 255, 255, 0.85); } .bg-black-opacity { background-color: rgba(0, 0, 0, 0.85); } .bg-black-opacity-light { background-color: rgba(0, 0, 0, 0.5); } .bg-deep-pink-opacity {background-color: rgba(255, 33, 79, 0.85);} .bg-orange-opacity {background-color: rgba(240, 76, 32, 0.85);} .bg-charcoal-gray{background-color: #0e0f10;} /*============================== Margin ================================*/ .margin-half-all {margin:.5%} .margin-one-all {margin:1%} .margin-one-half-all {margin:1.5%} .margin-two-all {margin:2%} .margin-two-half-all {margin:2.5%} .margin-three-all {margin:3%} .margin-three-half-all {margin:3.5%} .margin-four-all {margin:4%} .margin-four-half-all {margin:4.5%} .margin-five-all {margin:5%} .margin-five-half-all {margin:5.5%} .margin-six-all {margin:6%} .margin-six-half-all {margin:6.5%} .margin-seven-all {margin:7%} .margin-seven-half-all {margin:7.5%} .margin-eight-all {margin:8%} .margin-eight-half-all {margin:8.5%} .margin-nine-all {margin:9%} .margin-nine-half-all {margin:9.5%} .margin-ten-all {margin:10%} .margin-ten-half-all {margin:10.5%} .margin-eleven-all {margin:11%} .margin-eleven-half-all {margin:11.5%} .margin-twelve-all {margin:12%} .margin-twelve-half-all {margin:12.5%} .margin-thirteen-all {margin:13%} .margin-thirteen-half-all {margin:13.5%} .margin-fourteen-all {margin:14%} .margin-fourteen-half-all {margin:14.5%} .margin-fifteen-all {margin:15%} .margin-fifteen-half-all {margin:15.5%} .margin-sixteen-all {margin:16%} .margin-sixteen-half-all {margin:16.5%} .margin-seventeen-all {margin:17%} .margin-seventeen-half-all {margin:17.5%} .margin-eighteen-all {margin:18%} .margin-eighteen-half-all {margin:18.5%} .margin-nineteen-all {margin:19%} .margin-nineteen-half-all {margin:19.5%} .margin-twenty-all {margin:20%} .margin-twenty-half-all {margin:20.5%} .margin-twenty-one-all {margin:21%} .margin-twenty-one-half-all {margin:21.5%} .margin-twenty-two-all {margin:22%} .margin-twenty-two-half-all {margin:22.5%} .margin-twenty-three-all {margin:23%} .margin-twenty-three-half-all {margin:23.5%} .margin-twenty-four-all {margin:24%} .margin-twenty-four-half-all {margin:24.5%} .margin-twenty-five-all {margin:25%} .margin-5px-all {margin:5px} .margin-10px-all {margin:10px} .margin-15px-all {margin:15px} .margin-20px-all {margin:20px} .margin-25px-all {margin:25px} .margin-30px-all {margin:30px} .margin-35px-all {margin:35px} .margin-40px-all {margin:40px} .margin-45px-all {margin:45px} .margin-50px-all {margin:50px} .margin-55px-all {margin:55px} .margin-60px-all {margin:60px} .margin-65px-all {margin:65px} .margin-70px-all {margin:70px} .margin-75px-all {margin:75px} .margin-80px-all {margin:80px} .margin-85px-all {margin:85px} .margin-90px-all {margin:90px} .margin-95px-all {margin:95px} .margin-100px-all {margin:100px} .no-margin {margin:0 !important} .no-margin-lr {margin-left: 0 !important; margin-right: 0 !important} .no-margin-tb {margin-top: 0 !important; margin-bottom: 0 !important} .no-margin-top {margin-top:0 !important} .no-margin-bottom {margin-bottom:0 !important} .no-margin-left {margin-left:0 !important} .no-margin-right {margin-right:0 !important} .margin-lr-auto {margin-left:auto !important; margin-right:auto !important} .margin-auto {margin: 0 auto !important;} /* margin top */ .margin-one-top {margin-top:1%} .margin-one-half-top {margin-top:1.5%} .margin-two-top {margin-top:2%} .margin-two-half-top {margin-top:2.5%} .margin-three-top {margin-top:3%} .margin-three-half-top {margin-top:3.5%} .margin-four-top {margin-top:4%} .margin-four-half-top {margin-top:4.5%} .margin-five-top {margin-top:5%} .margin-five-half-top {margin-top:5.5%} .margin-six-top {margin-top:6%} .margin-six-half-top {margin-top:6.5%} .margin-seven-top {margin-top:7%} .margin-seven-half-top {margin-top:7.5%} .margin-eight-top {margin-top:8%} .margin-eight-half-top {margin-top:8.5%} .margin-nine-top {margin-top:9%} .margin-nine-half-top {margin-top:9.5%} .margin-ten-top {margin-top:10%} .margin-ten-half-top {margin-top:10.5%} .margin-eleven-top {margin-top:11%} .margin-eleven-half-top {margin-top:11.5%} .margin-twelve-top {margin-top:12%} .margin-twelve-half-top {margin-top:12.5%} .margin-thirteen-top {margin-top:13%} .margin-thirteen-half-top {margin-top:13.5%} .margin-fourteen-top {margin-top:14%} .margin-fourteen-half-top {margin-top:14.5%} .margin-fifteen-top {margin-top:15%} .margin-fifteen-half-top {margin-top:15.5%} .margin-sixteen-top {margin-top:16%} .margin-sixteen-half-top {margin-top:16.5%} .margin-seventeen-top {margin-top:17%} .margin-seventeen-half-top {margin-top:17.5%} .margin-eighteen-top {margin-top:18%} .margin-eighteen-half-top {margin-top:18.5%} .margin-nineteen-top {margin-top:19%} .margin-nineteen-half-top {margin-top:19.5%} .margin-twenty-top {margin-top:20%} .margin-twenty-half-top {margin-top:20.5%} .margin-twenty-one-top {margin-top:21%} .margin-twenty-one-half-top {margin-top:21.5%} .margin-twenty-two-top {margin-top:22%} .margin-twenty-two-half-top {margin-top:22.5%} .margin-twenty-three-top {margin-top:23%} .margin-twenty-three-half-top {margin-top:23.5%} .margin-twenty-four-top {margin-top:24%} .margin-twenty-four-half-top {margin-top:24.5%} .margin-twenty-five-top {margin-top:25%} .margin-5px-top {margin-top:5px} .margin-10px-top {margin-top:10px} .margin-15px-top {margin-top:15px} .margin-20px-top {margin-top:20px} .margin-25px-top {margin-top:25px} .margin-30px-top {margin-top:30px} .margin-35px-top {margin-top:35px} .margin-40px-top {margin-top:40px} .margin-45px-top {margin-top:45px} .margin-50px-top {margin-top:50px} .margin-55px-top {margin-top:55px} .margin-60px-top {margin-top:60px} .margin-65px-top {margin-top:65px} .margin-70px-top {margin-top:70px} .margin-75px-top {margin-top:75px} .margin-80px-top {margin-top:80px} .margin-90px-top {margin-top:90px} .margin-100px-top {margin-top:100px} /* margin bottom */ .margin-one-bottom {margin-bottom:1%} .margin-one-half-bottom {margin-bottom:1.5%} .margin-two-bottom {margin-bottom:2%} .margin-two-half-bottom {margin-bottom:2.5%} .margin-three-bottom {margin-bottom:3%} .margin-three-half-bottom {margin-bottom:3.5%} .margin-four-bottom {margin-bottom:4%} .margin-four-half-bottom {margin-bottom:4.5%} .margin-five-bottom {margin-bottom:5%} .margin-five-half-bottom {margin-bottom:5.5%} .margin-six-bottom {margin-bottom:6%} .margin-six-half-bottom {margin-bottom:6.5%} .margin-seven-bottom {margin-bottom:7%} .margin-seven-half-bottom {margin-bottom:7.5%} .margin-eight-bottom {margin-bottom:8%} .margin-eight-half-bottom {margin-bottom:8.5%} .margin-nine-bottom {margin-bottom:9%} .margin-nine-half-bottom {margin-bottom:9.5%} .margin-ten-bottom {margin-bottom:10%} .margin-ten-half-bottom {margin-bottom:10.5%} .margin-eleven-bottom {margin-bottom:11%} .margin-eleven-half-bottom {margin-bottom:11.5%} .margin-twelve-bottom {margin-bottom:12%} .margin-twelve-half-bottom {margin-bottom:12.5%} .margin-thirteen-bottom {margin-bottom:13%} .margin-thirteen-half-bottom {margin-bottom:13.5%} .margin-fourteen-bottom {margin-bottom:14%} .margin-fourteen-half-bottom {margin-bottom:14.5%} .margin-fifteen-bottom {margin-bottom:15%} .margin-fifteen-half-bottom {margin-bottom:15.5%} .margin-sixteen-bottom {margin-bottom:16%} .margin-sixteen-half-bottom {margin-bottom:16.5%} .margin-seventeen-bottom {margin-bottom:17%} .margin-seventeen-half-bottom {margin-bottom:17.5%} .margin-eighteen-bottom {margin-bottom:18%} .margin-eighteen-half-bottom {margin-bottom:18.5%} .margin-nineteen-bottom {margin-bottom:19%} .margin-nineteen-half-bottom {margin-bottom:19.5%} .margin-twenty-bottom {margin-bottom:20%} .margin-twenty-half-bottom {margin-bottom:20.5%} .margin-twenty-one-bottom {margin-bottom:21%} .margin-twenty-one-half-bottom {margin-bottom:21.5%} .margin-twenty-two-bottom {margin-bottom:22%} .margin-twenty-two-half-bottom {margin-bottom:22.5%} .margin-twenty-three-bottom {margin-bottom:23%} .margin-twenty-three-half-bottom {margin-bottom:23.5%} .margin-twenty-four-bottom {margin-bottom:24%} .margin-twenty-four-half-bottom {margin-bottom:24.5%} .margin-twenty-five-bottom {margin-bottom:25%} .margin-5px-bottom {margin-bottom:5px} .margin-10px-bottom {margin-bottom:10px} .margin-15px-bottom {margin-bottom:15px} .margin-20px-bottom {margin-bottom:20px} .margin-25px-bottom {margin-bottom:25px} .margin-30px-bottom {margin-bottom:30px} .margin-35px-bottom {margin-bottom:35px} .margin-40px-bottom {margin-bottom:40px} .margin-45px-bottom {margin-bottom:45px} .margin-50px-bottom {margin-bottom:50px} .margin-55px-bottom {margin-bottom:55px} .margin-60px-bottom {margin-bottom:60px} .margin-65px-bottom {margin-bottom:65px} .margin-70px-bottom {margin-bottom:70px} .margin-75px-bottom {margin-bottom:75px} .margin-80px-bottom {margin-bottom:80px} .margin-85px-bottom {margin-bottom:85px} .margin-90px-bottom {margin-bottom:90px} .margin-95px-bottom {margin-bottom:95px} .margin-100px-bottom {margin-bottom:100px} /* margin right */ .margin-one-right {margin-right:1%} .margin-one-half-right {margin-right:1.5%} .margin-two-right {margin-right:2%} .margin-two-half-right {margin-right:2.5%} .margin-three-right {margin-right:3%} .margin-three-half-right {margin-right:3.5%} .margin-four-right {margin-right:4%} .margin-four-half-right {margin-right:4.5%} .margin-five-right {margin-right:5%} .margin-five-half-right {margin-right:5.5%} .margin-six-right {margin-right:6%} .margin-six-half-right {margin-right:6.5%} .margin-seven-right {margin-right:7%} .margin-seven-half-right {margin-right:7.5%} .margin-eight-right {margin-right:8%} .margin-eight-half-right {margin-right:8.5%} .margin-nine-right {margin-right:9%} .margin-nine-half-right {margin-right:9.5%} .margin-ten-right {margin-right:10%} .margin-ten-half-right {margin-right:10.5%} .margin-eleven-right {margin-right:11%} .margin-eleven-half-right {margin-right:11.5%} .margin-twelve-right {margin-right:12%} .margin-twelve-half-right {margin-right:12.5%} .margin-thirteen-right {margin-right:13%} .margin-thirteen-half-right {margin-right:13.5%} .margin-fourteen-right {margin-right:14%} .margin-fourteen-half-right {margin-right:14.5%} .margin-fifteen-right {margin-right:15%} .margin-fifteen-half-right {margin-right:15.5%} .margin-sixteen-right {margin-right:16%} .margin-sixteen-half-right {margin-right:16.5%} .margin-seventeen-right {margin-right:17%} .margin-seventeen-half-right {margin-right:17.5%} .margin-eighteen-right {margin-right:18%} .margin-eighteen-half-right {margin-right:18.5%} .margin-nineteen-right {margin-right:19%} .margin-nineteen-half-right {margin-right:19.5%} .margin-twenty-right {margin-right:20%} .margin-twenty-half-right {margin-right:20.5%} .margin-twenty-right {margin-right:21%} .margin-twenty-one-half-right {margin-right:21.5%} .margin-twenty-two-right {margin-right:22%} .margin-twenty-two-half-right {margin-right:22.5%} .margin-twenty-three-right {margin-right:23%} .margin-twenty-three-half-right {margin-right:23.5%} .margin-twenty-four-right {margin-right:24%} .margin-twenty-four-half-right {margin-right:24.5%} .margin-twenty-five-right {margin-right:25%} .margin-5px-right {margin-right:5px} .margin-10px-right {margin-right:10px} .margin-15px-right {margin-right:15px} .margin-20px-right {margin-right:20px} .margin-25px-right {margin-right:25px} .margin-30px-right {margin-right:30px} .margin-35px-right {margin-right:35px} .margin-40px-right {margin-right:40px} .margin-45px-right {margin-right:45px} .margin-50px-right {margin-right:50px} .margin-55px-right {margin-right:55px} .margin-60px-right {margin-right:60px} .margin-65px-right {margin-right:65px} .margin-70px-right {margin-right:70px} .margin-75px-right {margin-right:75px} .margin-80px-right {margin-right:80px} .margin-85px-right {margin-right:85px} .margin-90px-right {margin-right:90px} .margin-95px-right {margin-right:95px} .margin-100px-right {margin-right:100px} /* margin left */ .margin-one-left {margin-left:1%} .margin-one-half-left {margin-left:1.5%} .margin-two-left {margin-left:2%} .margin-two-half-left {margin-left:2.5%} .margin-three-left {margin-left:3%} .margin-three-half-left {margin-left:3.5%} .margin-four-left {margin-left:4%} .margin-four-half-left {margin-left:4.5%} .margin-five-left {margin-left:5%} .margin-five-half-left {margin-left:5.5%} .margin-six-left {margin-left:6%} .margin-six-half-left {margin-left:6.5%} .margin-seven-left {margin-left:7%} .margin-seven-half-left {margin-left:7.5%} .margin-eight-left {margin-left:8%} .margin-eight-half-left {margin-left:8.5%} .margin-nine-left {margin-left:9%} .margin-nine-half-left {margin-left:9.5%} .margin-ten-left {margin-left:10%} .margin-ten-half-left {margin-left:10.5%} .margin-eleven-left {margin-left:11%} .margin-eleven-half-left {margin-left:11.5%} .margin-twelve-left {margin-left:12%} .margin-twelve-half-left {margin-left:12.5%} .margin-thirteen-left {margin-left:13%} .margin-thirteen-half-left {margin-left:13.5%} .margin-fourteen-left {margin-left:14%} .margin-fourteen-half-left {margin-left:14.5%} .margin-fifteen-left {margin-left:15%} .margin-fifteen-half-left {margin-left:15.5%} .margin-sixteen-left {margin-left:16%} .margin-sixteen-half-left {margin-left:16.5%} .margin-seventeen-left {margin-left:17%} .margin-seventeen-half-left {margin-left:17.5%} .margin-eighteen-left {margin-left:18%} .margin-eighteen-half-left {margin-left:18.5%} .margin-nineteen-left {margin-left:19%} .margin-nineteen-half-left {margin-left:19.5%} .margin-twenty-left {margin-left:20%} .margin-twenty-half-left {margin-left:20.5%} .margin-twenty-one-left {margin-left:21%} .margin-twenty-one-half-left {margin-left:21.5%} .margin-twenty-two-left {margin-left:22%} .margin-twenty-two-half-left {margin-left:22.5%} .margin-twenty-three-left {margin-left:23%} .margin-twenty-three-half-left {margin-left:23.5%} .margin-twenty-four-left {margin-left:24%} .margin-twenty-four-half-left {margin-left:24.5%} .margin-twenty-five-left {margin-left:25%} .margin-5px-left {margin-left:5px} .margin-10px-left {margin-left:10px} .margin-15px-left {margin-left:15px} .margin-20px-left {margin-left:20px} .margin-25px-left {margin-left:25px} .margin-30px-left {margin-left:30px} .margin-35px-left {margin-left:35px} .margin-40px-left {margin-left:40px} .margin-45px-left {margin-left:45px} .margin-50px-left {margin-left:50px} .margin-55px-left {margin-left:55px} .margin-60px-left {margin-left:60px} .margin-65px-left {margin-left:65px} .margin-70px-left {margin-left:70px} .margin-75px-left {margin-left:75px} .margin-80px-left {margin-left:80px} .margin-85px-left {margin-left:85px} .margin-90px-left {margin-left:90px} .margin-95px-left {margin-left:95px} .margin-100px-left {margin-left:100px} /* margin left and right */ .margin-one-lr {margin-left:1%; margin-right:1%;} .margin-one-half-lr {margin-left:1.5%; margin-right:1.5%;} .margin-two-lr {margin-left:2%; margin-right:2%;} .margin-two-half-lr {margin-left:2.5%; margin-right:2.5%;} .margin-three-lr {margin-left:3%; margin-right:3%;} .margin-three-half-lr {margin-left:3.5%; margin-right:3.5%;} .margin-four-lr {margin-left:4%; margin-right:4%;} .margin-four-half-lr {margin-left:4.5%; margin-right:4.5%;} .margin-five-lr {margin-left:5%; margin-right:5%;} .margin-five-half-lr {margin-left:5.5%; margin-right:5.5%;} .margin-six-lr {margin-left:6%; margin-right:6%;} .margin-six-half-lr {margin-left:6.5%; margin-right:6.5%;} .margin-seven-lr {margin-left:7%; margin-right:7%;} .margin-seven-half-lr {margin-left:7.5%; margin-right:7.5%;} .margin-eight-lr {margin-left:8%; margin-right:8%;} .margin-eight-half-lr {margin-left:8.5%; margin-right:8.5%;} .margin-nine-lr {margin-left:9%; margin-right:9%;} .margin-nine-half-lr {margin-left:9.5%; margin-right:9.5%;} .margin-ten-lr {margin-left:10%; margin-right:10%;} .margin-ten-half-lr {margin-left:10.5%; margin-right:10.5%;} .margin-eleven-lr {margin-left:11%; margin-right:11%;} .margin-eleven-half-lr {margin-left:11.5%; margin-right:11.5%;} .margin-twelve-lr {margin-left:12%; margin-right:12%;} .margin-twelve-half-lr {margin-left:12.5%; margin-right:12.5%;} .margin-thirteen-lr {margin-left:13%; margin-right:13%;} .margin-thirteen-half-lr {margin-left:13.5%; margin-right:13.5%;} .margin-fourteen-lr {margin-left:14%; margin-right:14%;} .margin-fourteen-half-lr {margin-left:14.5%; margin-right:14.5%;} .margin-fifteen-lr {margin-left:15%; margin-right:15%;} .margin-fifteen-half-lr {margin-left:15.5%; margin-right:15.5%;} .margin-sixteen-lr {margin-left:16%; margin-right:16%;} .margin-sixteen-half-lr {margin-left:16.5%; margin-right:16.5%;} .margin-seventeen-lr {margin-left:17%; margin-right:17%;} .margin-seventeen-half-lr {margin-left:17.5%; margin-right:17.5%;} .margin-eighteen-lr {margin-left:18%; margin-right:18%;} .margin-eighteen-half-lr {margin-left:18.5%; margin-right:18.5%;} .margin-nineteen-lr {margin-left:19%; margin-right:19%;} .margin-nineteen-half-lr {margin-left:19.5%; margin-right:19.5%;} .margin-twenty-lr {margin-left:20%; margin-right:20%;} .margin-twenty-half-lr {margin-left:20.5%; margin-right:20.5%;} .margin-twenty-one-lr {margin-left:21%; margin-right:21%;} .margin-twenty-one-half-lr {margin-left:21.5%; margin-right:21.5%;} .margin-twenty-two-lr {margin-left:22%; margin-right:22%;} .margin-twenty-two-half-lr {margin-left:22.5%; margin-right:22.5%;} .margin-twenty-three-lr {margin-left:23%; margin-right:23%;} .margin-twenty-three-half-lr {margin-left:23.5%; margin-right:23.5%;} .margin-twenty-four-lr {margin-left:24%; margin-right:24%;} .margin-twenty-four-half-lr {margin-left:24.5%; margin-right:24.5%;} .margin-twenty-five-lr {margin-left:25%; margin-right:25%;} .margin-5px-lr {margin-left:5px; margin-right:5px;} .margin-10px-lr {margin-left:10px; margin-right:10px;} .margin-15px-lr {margin-left:15px; margin-right:15px;} .margin-20px-lr {margin-left:20px; margin-right:20px;} .margin-25px-lr {margin-left:25px; margin-right:25px;} .margin-30px-lr {margin-left:30px; margin-right:30px;} .margin-35px-lr {margin-left:35px; margin-right:35px;} .margin-40px-lr {margin-left:40px; margin-right:40px;} .margin-45px-lr {margin-left:45px; margin-right:45px;} .margin-50px-lr {margin-left:50px; margin-right:50px;} .margin-55px-lr {margin-left:55px; margin-right:55px;} .margin-60px-lr {margin-left:60px; margin-right:60px;} .margin-65px-lr {margin-left:65px; margin-right:65px;} .margin-70px-lr {margin-left:70px; margin-right:70px;} .margin-75px-lr {margin-left:75px; margin-right:75px;} .margin-80px-lr {margin-left:80px; margin-right:80px;} .margin-85px-lr {margin-left:85px; margin-right:85px;} .margin-90px-lr {margin-left:90px; margin-right:90px;} .margin-95px-lr {margin-left:95px; margin-right:95px;} .margin-100px-lr {margin-left:100px; margin-right:100px;} /* margin top and bottom */ .margin-one-tb {margin-top:1%; margin-bottom:1%;} .margin-one-half-tb {margin-top:1.5%; margin-bottom:1.5%;} .margin-two-tb {margin-top:2%; margin-bottom:2%;} .margin-two-half-tb {margin-top:2.5%; margin-bottom:2.5%;} .margin-three-tb {margin-top:3%; margin-bottom:3%;} .margin-three-half-tb {margin-top:3.5%; margin-bottom:3.5%;} .margin-four-tb {margin-top:4%; margin-bottom:4%;} .margin-four-half-tb {margin-top:4.5%; margin-bottom:4.5%;} .margin-five-tb {margin-top:5%; margin-bottom:5%;} .margin-five-half-tb {margin-top:5.5%; margin-bottom:5.5%;} .margin-six-tb {margin-top:6%; margin-bottom:6%;} .margin-six-half-tb {margin-top:6.5%; margin-bottom:6.5%;} .margin-seven-tb {margin-top:7%; margin-bottom:7%;} .margin-seven-half-tb {margin-top:7.5%; margin-bottom:7.5%;} .margin-eight-tb {margin-top:8%; margin-bottom:8%;} .margin-eight-half-tb {margin-top:8.5%; margin-bottom:8.5%;} .margin-nine-tb {margin-top:9%; margin-bottom:9%;} .margin-nine-half-tb {margin-top:9.5%; margin-bottom:9.5%;} .margin-ten-tb {margin-top:10%; margin-bottom:10%;} .margin-ten-half-tb {margin-top:10.5%; margin-bottom:10.5%;} .margin-eleven-tb {margin-top:11%; margin-bottom:11%;} .margin-eleven-half-tb {margin-top:11.5%; margin-bottom:11.5%;} .margin-twelve-tb {margin-top:12%; margin-bottom:12%;} .margin-twelve-half-tb {margin-top:12.5%; margin-bottom:12.5%;} .margin-thirteen-tb {margin-top:13%; margin-bottom:13%;} .margin-thirteen-half-tb {margin-top:13.5%; margin-bottom:13.5%;} .margin-fourteen-tb {margin-top:14%; margin-bottom:14%;} .margin-fourteen-half-tb {margin-top:14.5%; margin-bottom:14.5%;} .margin-fifteen-tb {margin-top:15%; margin-bottom:15%;} .margin-fifteen-half-tb {margin-top:15.5%; margin-bottom:15.5%;} .margin-sixteen-tb {margin-top:16%; margin-bottom:16%;} .margin-sixteen-half-tb {margin-top:16.5%; margin-bottom:16.5%;} .margin-seventeen-tb {margin-top:17%; margin-bottom:17%;} .margin-seventeen-half-tb {margin-top:17.5%; margin-bottom:17.5%;} .margin-eighteen-tb {margin-top:18%; margin-bottom:18%;} .margin-eighteen-half-tb {margin-top:18.5%; margin-bottom:18.5%;} .margin-nineteen-tb {margin-top:19%; margin-bottom:19%;} .margin-nineteen-half-tb {margin-top:19.5%; margin-bottom:19.5%;} .margin-twenty-tb {margin-top:20%; margin-bottom:20%;} .margin-twenty-half-tb {margin-top:20.5%; margin-bottom:20.5%;} .margin-twenty-one-tb {margin-top:21%; margin-bottom:21%;} .margin-twenty-one-half-tb {margin-top:21.5%; margin-bottom:21.5%;} .margin-twenty-two-tb {margin-top:22%; margin-bottom:22%;} .margin-twenty-two-half-tb {margin-top:22.5%; margin-bottom:22.5%;} .margin-twenty-three-tb {margin-top:23%; margin-bottom:23%;} .margin-twenty-three-half-tb {margin-top:23.5%; margin-bottom:23.5%;} .margin-twenty-four-tb {margin-top:24%; margin-bottom:24%;} .margin-twenty-four-half-tb {margin-top:24.5%; margin-bottom:24.5%;} .margin-twenty-five-tb {margin-top:25%; margin-bottom:25%;} .margin-5px-tb {margin-top:5px; margin-bottom:5px;} .margin-10px-tb {margin-top:10px; margin-bottom:10px;} .margin-15px-tb {margin-top:15px; margin-bottom:15px;} .margin-20px-tb {margin-top:20px; margin-bottom:20px;} .margin-25px-tb {margin-top:25px; margin-bottom:25px;} .margin-30px-tb {margin-top:30px; margin-bottom:30px;} .margin-35px-tb {margin-top:35px; margin-bottom:35px;} .margin-40px-tb {margin-top:40px; margin-bottom:40px;} .margin-45px-tb {margin-top:45px; margin-bottom:45px;} .margin-50px-tb {margin-top:50px; margin-bottom:50px;} .margin-55px-tb {margin-top:55px; margin-bottom:55px;} .margin-60px-tb {margin-top:60px; margin-bottom:60px;} .margin-65px-tb {margin-top:65px; margin-bottom:65px;} .margin-70px-tb {margin-top:70px; margin-bottom:70px;} .margin-75px-tb {margin-top:75px; margin-bottom:75px;} .margin-80px-tb {margin-top:80px; margin-bottom:80px;} .margin-85px-tb {margin-top:85px; margin-bottom:85px;} .margin-90px-tb {margin-top:90px; margin-bottom:90px;} .margin-95px-tb {margin-top:95px; margin-bottom:95px;} .margin-100px-tb {margin-top:100px; margin-bottom:100px;} /*=============================== Padding =================================*/ .no-padding {padding:0 !important} .no-padding-lr {padding-left: 0 !important; padding-right: 0 !important} .no-padding-tb {padding-top: 0 !important; padding-bottom: 0 !important} .no-padding-top {padding-top:0 !important} .no-padding-bottom {padding-bottom:0 !important} .no-padding-left {padding-left:0 !important} .no-padding-right {padding-right:0 !important} .padding-one-all {padding:1%;} .padding-one-half-all {padding:1.5%;} .padding-two-all {padding:2%;} .padding-two-half-all {padding:2.5%;} .padding-three-all {padding:3%;} .padding-three-half-all {padding:3.5%;} .padding-four-all {padding:4%;} .padding-four-half-all {padding:4.5%;} .padding-five-all {padding:5%;} .padding-five-half-all {padding:5.5%;} .padding-six-all {padding:6%;} .padding-six-half-all {padding:6.5%;} .padding-seven-all {padding:7%;} .padding-seven-half-all {padding:7.5%;} .padding-eight-all {padding:8%;} .padding-eight-half-all {padding:8.5%;} .padding-nine-all {padding:9%;} .padding-nine-half-all {padding:9.5%;} .padding-ten-all {padding:10%;} .padding-ten-half-all {padding:10.5%;} .padding-eleven-all {padding:11%;} .padding-eleven-half-all {padding:11.5%;} .padding-twelve-all {padding:12%;} .padding-twelve-half-all {padding:12.5%;} .padding-thirteen-all {padding:13%;} .padding-thirteen-half-all {padding:13.5%;} .padding-fourteen-all {padding:14%;} .padding-fourteen-half-all {padding:14.5%;} .padding-fifteen-all {padding:15%;} .padding-fifteen-half-all {padding:15.5%;} .padding-sixteen-all {padding:16%;} .padding-sixteen-half-all {padding:16.5%;} .padding-seventeen-all {padding:17%;} .padding-seventeen-half-all {padding:17.5%;} .padding-eighteen-all {padding:18%;} .padding-eighteen-half-all {padding:18.5%;} .padding-nineteen-all {padding:19%;} .padding-nineteen-half-all {padding:19.5%;} .padding-twenty-all {padding:20%;} .padding-twenty-half-all {padding:20.5%;} .padding-twenty-one-all {padding:21%;} .padding-twenty-one-half-all {padding:21.5%;} .padding-twenty-two-all {padding:22%;} .padding-twenty-two-half-all {padding:22.5%;} .padding-twenty-three-all {padding:23%;} .padding-twenty-three-half-all {padding:23.5%;} .padding-twenty-four-all {padding:24%;} .padding-twenty-four-half-all {padding:24.5%;} .padding-twenty-five-all {padding:25%;} .padding-twenty-five-half-all {padding:25.5%;} .padding-5px-all {padding:5px;} .padding-10px-all {padding:10px;} .padding-15px-all {padding:15px;} .padding-20px-all {padding:20px;} .padding-25px-all {padding:25px;} .padding-30px-all {padding:30px;} .padding-35px-all {padding:35px;} .padding-40px-all {padding:40px;} .padding-45px-all {padding:45px;} .padding-50px-all {padding:50px;} .padding-55px-all {padding:55px;} .padding-60px-all {padding:60px;} .padding-65px-all {padding:65px;} .padding-70px-all {padding:70px;} .padding-75px-all {padding:75px;} .padding-80px-all {padding:80px;} .padding-85px-all {padding:85px;} .padding-90px-all {padding:90px;} .padding-95px-all {padding:95px;} .padding-100px-all {padding:100px;} /* padding top */ .padding-one-top {padding-top:1%;} .padding-one-half-top {padding-top:1.5%;} .padding-two-top {padding-top:2%;} .padding-two-half-top {padding-top:2.5%;} .padding-three-top {padding-top:3%;} .padding-three-half-top {padding-top:3.5%;} .padding-four-top {padding-top:4%;} .padding-four-half-top {padding-top:4.5%;} .padding-five-top {padding-top:5%;} .padding-five-half-top {padding-top:5.5%;} .padding-six-top {padding-top:6%;} .padding-six-half-top {padding-top:6.5%;} .padding-seven-top {padding-top:7%;} .padding-seven-half-top {padding-top:7.5%;} .padding-eight-top {padding-top:8%;} .padding-eight-half-top {padding-top:8.5%;} .padding-nine-top {padding-top:9%;} .padding-nine-half-top {padding-top:9.5%;} .padding-ten-top {padding-top:10%;} .padding-ten-half-top {padding-top:10.5%;} .padding-eleven-top {padding-top:11%;} .padding-eleven-half-top {padding-top:11.5%;} .padding-twelve-top {padding-top:12%;} .padding-twelve-half-top {padding-top:12.5%;} .padding-thirteen-top {padding-top:13%;} .padding-thirteen-half-top {padding-top:13.5%;} .padding-fourteen-top {padding-top:14%;} .padding-fourteen-half-top {padding-top:14.5%;} .padding-fifteen-top {padding-top:15%;} .padding-fifteen-half-top {padding-top:15.5%;} .padding-sixteen-top {padding-top:16%;} .padding-sixteen-half-top {padding-top:16.5%;} .padding-seventeen-top {padding-top:17%;} .padding-seventeen-half-top {padding-top:17.5%;} .padding-eighteen-top {padding-top:18%;} .padding-eighteen-half-top {padding-top:18.5%;} .padding-nineteen-top {padding-top:19%;} .padding-nineteen-half-top {padding-top:19.5%;} .padding-twenty-top {padding-top:20%;} .padding-twenty-half-top {padding-top:20.5%;} .padding-twenty-one-top {padding-top:21%;} .padding-twenty-one-half-top {padding-top:21.5%;} .padding-twenty-two-top {padding-top:22%;} .padding-twenty-two-half-top {padding-top:22.5%;} .padding-twenty-two-top {padding-top:22%;} .padding-twenty-two-half-top {padding-top:22.5%;} .padding-twenty-three-top {padding-top:23%;} .padding-twenty-three-half-top {padding-top:23.5%;} .padding-twenty-four-top {padding-top:24%;} .padding-twenty-four-half-top {padding-top:24.5%;} .padding-twenty-five-top {padding-top:25%;} .padding-5px-top {padding-top:5px;} .padding-10px-top {padding-top:10px;} .padding-15px-top {padding-top:15px;} .padding-20px-top {padding-top:20px;} .padding-25px-top {padding-top:25px;} .padding-30px-top {padding-top:30px;} .padding-35px-top {padding-top:35px;} .padding-40px-top {padding-top:40px;} .padding-45px-top {padding-top:45px;} .padding-50px-top {padding-top:50px;} .padding-55px-top {padding-top:55px;} .padding-60px-top {padding-top:60px;} .padding-65px-top {padding-top:65px;} .padding-70px-top {padding-top:70px;} .padding-75px-top {padding-top:75px;} .padding-80px-top {padding-top:80px;} .padding-85px-top {padding-top:85px;} .padding-90px-top {padding-top:90px;} .padding-95px-top {padding-top:95px;} .padding-100px-top {padding-top:100px;} /* padding bottom */ .padding-one-bottom {padding-bottom:1%;} .padding-one-half-bottom {padding-bottom:1.5%;} .padding-two-bottom {padding-bottom:2%;} .padding-two-half-bottom {padding-bottom:2.5%;} .padding-three-bottom {padding-bottom:3%;} .padding-three-half-bottom {padding-bottom:3.5%;} .padding-four-bottom {padding-bottom:4%;} .padding-four-half-bottom {padding-bottom:4.5%;} .padding-five-bottom {padding-bottom:5%;} .padding-five-half-bottom {padding-bottom:5.5%;} .padding-six-bottom {padding-bottom:6%;} .padding-six-half-bottom {padding-bottom:6.5%;} .padding-seven-bottom {padding-bottom:7%;} .padding-seven-half-bottom {padding-bottom:7.5%;} .padding-eight-bottom {padding-bottom:8%;} .padding-eight-half-bottom {padding-bottom:8.5%;} .padding-nine-bottom {padding-bottom:9%;} .padding-nine-half-bottom {padding-bottom:9.5%;} .padding-ten-bottom {padding-bottom:10%;} .padding-ten-half-bottom {padding-bottom:10.5%;} .padding-eleven-bottom {padding-bottom:11%;} .padding-eleven-half-bottom {padding-bottom:11.5%;} .padding-twelve-bottom {padding-bottom:12%;} .padding-twelve-half-bottom {padding-bottom:12.5%;} .padding-thirteen-bottom {padding-bottom:13%;} .padding-thirteen-half-bottom {padding-bottom:13.5%;} .padding-fourteen-bottom {padding-bottom:14%;} .padding-fourteen-half-bottom {padding-bottom:14.5%;} .padding-fifteen-bottom {padding-bottom:15%;} .padding-fifteen-half-bottom {padding-bottom:15.5%;} .padding-sixteen-bottom {padding-bottom:16%;} .padding-sixteen-half-bottom {padding-bottom:16.5%;} .padding-seventeen-bottom {padding-bottom:17%;} .padding-seventeen-half-bottom {padding-bottom:17.5%;} .padding-eighteen-bottom {padding-bottom:18%;} .padding-eighteen-half-bottom {padding-bottom:18.5%;} .padding-nineteen-bottom {padding-bottom:19%;} .padding-nineteen-half-bottom {padding-bottom:19.5%;} .padding-twenty-bottom {padding-bottom:20%;} .padding-twenty-half-bottom {padding-bottom:20.5%;} .padding-twenty-one-bottom {padding-bottom:21%;} .padding-twenty-one-half-bottom {padding-bottom:21.5%;} .padding-twenty-two-bottom {padding-bottom:22%;} .padding-twenty-two-half-bottom {padding-bottom:22.5%;} .padding-twenty-three-bottom {padding-bottom:23%;} .padding-twenty-three-half-bottom {padding-bottom:23.5%;} .padding-twenty-four-bottom {padding-bottom:24%;} .padding-twenty-four-half-bottom {padding-bottom:24.5%;} .padding-twenty-five-bottom {padding-bottom:25%;} .padding-5px-bottom {padding-bottom:5px;} .padding-10px-bottom {padding-bottom:10px;} .padding-15px-bottom {padding-bottom:15px;} .padding-20px-bottom {padding-bottom:20px;} .padding-25px-bottom {padding-bottom:25px;} .padding-30px-bottom {padding-bottom:30px;} .padding-35px-bottom {padding-bottom:35px;} .padding-40px-bottom {padding-bottom:40px;} .padding-45px-bottom {padding-bottom:45px;} .padding-50px-bottom {padding-bottom:50px;} .padding-55px-bottom {padding-bottom:55px;} .padding-60px-bottom {padding-bottom:60px;} .padding-65px-bottom {padding-bottom:65px;} .padding-70px-bottom {padding-bottom:70px;} .padding-75px-bottom {padding-bottom:75px;} .padding-80px-bottom {padding-bottom:80px;} .padding-85px-bottom {padding-bottom:85px;} .padding-90px-bottom {padding-bottom:90px;} .padding-95px-bottom {padding-bottom:95px;} .padding-100px-bottom {padding-bottom:100px;} /* padding right */ .padding-one-right {padding-right:1%;} .padding-one-half-right {padding-right:1.5%;} .padding-two-right {padding-right:2%;} .padding-two-half-right {padding-right:2.5%;} .padding-three-right {padding-right:3%;} .padding-three-half-right {padding-right:3.5%;} .padding-four-right {padding-right:4%;} .padding-four-half-right {padding-right:4.5%;} .padding-five-right {padding-right:5%;} .padding-five-half-right {padding-right:5.5%;} .padding-six-right {padding-right:6%;} .padding-six-half-right {padding-right:6.5%;} .padding-seven-right {padding-right:7%;} .padding-seven-half-right {padding-right:7.5%;} .padding-eight-right {padding-right:8%;} .padding-eight-half-right {padding-right:8.5%;} .padding-nine-right {padding-right:9%;} .padding-nine-half-right {padding-right:9.5%;} .padding-ten-right {padding-right:10%;} .padding-ten-half-right {padding-right:10.5%;} .padding-eleven-right {padding-right:11%;} .padding-eleven-half-right {padding-right:11.5%;} .padding-twelve-right {padding-right:12%;} .padding-twelve-half-right {padding-right:12.5%;} .padding-thirteen-right {padding-right:13%;} .padding-thirteen-half-right {padding-right:13.5%;} .padding-fourteen-right {padding-right:14%;} .padding-fourteen-half-right {padding-right:14.5%;} .padding-fifteen-right {padding-right:15%;} .padding-fifteen-half-right {padding-right:15.5%;} .padding-sixteen-right {padding-right:16%;} .padding-sixteen-half-right {padding-right:16.5%;} .padding-seventeen-right {padding-right:17%;} .padding-seventeen-half-right {padding-right:17.5%;} .padding-eighteen-right {padding-right:18%;} .padding-eighteen-half-right {padding-right:18.5%;} .padding-nineteen-right {padding-right:19%;} .padding-nineteen-half-right {padding-right:19.5%;} .padding-twenty-right {padding-right:20%;} .padding-twenty-half-right {padding-right:20.5%;} .padding-twenty-one-right {padding-right:21%;} .padding-twenty-one-half-right {padding-right:21.5%;} .padding-twenty-two-right {padding-right:22%;} .padding-twenty-two-half-right {padding-right:22.5%;} .padding-twenty-three-right {padding-right:23%;} .padding-twenty-three-half-right {padding-right:23.5%;} .padding-twenty-four-right {padding-right:24%;} .padding-twenty-four-half-right {padding-right:24.5%;} .padding-twenty-five-right {padding-right:25%;} .padding-5px-right {padding-right:5px;} .padding-10px-right {padding-right:10px;} .padding-15px-right {padding-right:15px;} .padding-20px-right {padding-right:20px;} .padding-25px-right {padding-right:25px;} .padding-30px-right {padding-right:30px;} .padding-35px-right {padding-right:35px;} .padding-40px-right {padding-right:40px;} .padding-45px-right {padding-right:45px;} .padding-50px-right {padding-right:50px;} .padding-55px-right {padding-right:55px;} .padding-60px-right {padding-right:60px;} .padding-65px-right {padding-right:65px;} .padding-70px-right {padding-right:70px;} .padding-75px-right {padding-right:75px;} .padding-80px-right {padding-right:80px;} .padding-85px-right {padding-right:85px;} .padding-90px-right {padding-right:90px;} .padding-95px-right {padding-right:95px;} .padding-100px-right {padding-right:100px;} /* padding left */ .padding-one-left {padding-left:1%;} .padding-one-half-left {padding-left:1.5%;} .padding-two-left {padding-left:2%;} .padding-two-half-left {padding-left:2.5%;} .padding-three-left {padding-left:3%;} .padding-three-half-left {padding-left:3.5%;} .padding-four-left {padding-left:4%;} .padding-four-half-left {padding-left:4.5%;} .padding-five-left {padding-left:5%;} .padding-five-half-left {padding-left:5.5%;} .padding-six-left {padding-left:6%;} .padding-six-half-left {padding-left:6.5%;} .padding-seven-left {padding-left:7%;} .padding-seven-half-left {padding-left:7.5%;} .padding-eight-left {padding-left:8%;} .padding-eight-half-left {padding-left:8.5%;} .padding-nine-left {padding-left:9%;} .padding-nine-half-left {padding-left:9.5%;} .padding-ten-left {padding-left:10%;} .padding-ten-half-left {padding-left:10.5%;} .padding-eleven-left {padding-left:11%;} .padding-eleven-half-left {padding-left:11.5%;} .padding-twelve-left {padding-left:12%;} .padding-twelve-half-left {padding-left:12.5%;} .padding-thirteen-left {padding-left:13%;} .padding-thirteen-half-left {padding-left:13.5%;} .padding-fourteen-left {padding-left:14%;} .padding-fourteen-half-left {padding-left:14.5%;} .padding-fifteen-left {padding-left:15%;} .padding-fifteen-half-left {padding-left:15.5%;} .padding-sixteen-left {padding-left:16%;} .padding-sixteen-half-left {padding-left:16.5%;} .padding-seventeen-left {padding-left:17%;} .padding-seventeen-half-left {padding-left:17.5%;} .padding-eighteen-left {padding-left:18%;} .padding-eighteen-half-left {padding-left:18.5%;} .padding-nineteen-left {padding-left:19%;} .padding-nineteen-half-left {padding-left:19.5%;} .padding-twenty-left {padding-left:20%;} .padding-twenty-half-left {padding-left:20.5%;} .padding-twenty-one-left {padding-left:21%;} .padding-twenty-one-half-left {padding-left:21.5%;} .padding-twenty-two-left {padding-left:22%;} .padding-twenty-two-half-left {padding-left:22.5%;} .padding-twenty-three-left {padding-left:23%;} .padding-twenty-three-half-left {padding-left:23.5%;} .padding-twenty-four-left {padding-left:24%;} .padding-twenty-four-half-left {padding-left:24.5%;} .padding-twenty-five-left {padding-left:25%;} .padding-5px-left {padding-left:5px;} .padding-10px-left {padding-left:10px;} .padding-15px-left {padding-left:15px;} .padding-20px-left {padding-left:20px;} .padding-25px-left {padding-left:25px;} .padding-30px-left {padding-left:30px;} .padding-35px-left {padding-left:35px;} .padding-40px-left {padding-left:40px;} .padding-45px-left {padding-left:45px;} .padding-50px-left {padding-left:50px;} .padding-55px-left {padding-left:55px;} .padding-60px-left {padding-left:60px;} .padding-65px-left {padding-left:65px;} .padding-70px-left {padding-left:70px;} .padding-75px-left {padding-left:75px;} .padding-80px-left {padding-left:80px;} .padding-85px-left {padding-left:85px;} .padding-90px-left {padding-left:90px;} .padding-95px-left {padding-left:95px;} .padding-100px-left {padding-left:100px;} /* padding top and bottom */ .padding-one-tb {padding-top:1%; padding-bottom:1%;} .padding-one-half-tb {padding-top:1.5%; padding-bottom:1.5%;} .padding-two-tb {padding-top:2%; padding-bottom:2%;} .padding-two-half-tb {padding-top:2.5%; padding-bottom:2.5%;} .padding-three-tb {padding-top:3%; padding-bottom:3%;} .padding-three-half-tb {padding-top:3.5%; padding-bottom:3.5%;} .padding-four-tb {padding-top:4%; padding-bottom:4%;} .padding-four-half-tb {padding-top:4.5%; padding-bottom:4.5%;} .padding-five-tb {padding-top:5%; padding-bottom:5%;} .padding-five-half-tb {padding-top:5.5%; padding-bottom:5.5%;} .padding-six-tb {padding-top:6%; padding-bottom:6%;} .padding-six-half-tb {padding-top:6.5%; padding-bottom:6.5%;} .padding-seven-tb {padding-top:7%; padding-bottom:7%;} .padding-seven-half-tb {padding-top:7.5%; padding-bottom:7.5%;} .padding-eight-tb {padding-top:8%; padding-bottom:8%;} .padding-eight-half-tb {padding-top:8.5%; padding-bottom:8.5%;} .padding-nine-tb {padding-top:9%; padding-bottom:9%;} .padding-nine-half-tb {padding-top:9.5%; padding-bottom:9.5%;} .padding-ten-tb {padding-top:10%; padding-bottom:10%;} .padding-ten-half-tb {padding-top:10.5%; padding-bottom:10.5%;} .padding-eleven-tb {padding-top:11%; padding-bottom:11%;} .padding-eleven-half-tb {padding-top:11.5%; padding-bottom:11.5%;} .padding-twelve-tb {padding-top:12%; padding-bottom:12%;} .padding-twelve-half-tb {padding-top:12.5%; padding-bottom:12.5%;} .padding-thirteen-tb {padding-top:13%; padding-bottom:13%;} .padding-thirteen-half-tb {padding-top:13.5%; padding-bottom:13.5%;} .padding-fourteen-tb {padding-top:14%; padding-bottom:14%;} .padding-fourteen-half-tb {padding-top:14.5%; padding-bottom:14.5%;} .padding-fifteen-tb {padding-top:15%; padding-bottom:15%;} .padding-fifteen-half-tb {padding-top:15.5%; padding-bottom:15.5%;} .padding-sixteen-tb {padding-top:16%; padding-bottom:16%;} .padding-sixteen-half-tb {padding-top:16.5%; padding-bottom:16.5%;} .padding-seventeen-tb {padding-top:17%; padding-bottom:17%;} .padding-seventeen-half-tb {padding-top:17.5%; padding-bottom:17.5%;} .padding-eighteen-tb {padding-top:18%; padding-bottom:18%;} .padding-eighteen-half-tb {padding-top:18.5%; padding-bottom:18.5%;} .padding-nineteen-tb {padding-top:19%; padding-bottom:19%;} .padding-nineteen-half-tb {padding-top:19.5%; padding-bottom:19.5%;} .padding-twenty-tb {padding-top:20%; padding-bottom:20%;} .padding-twenty-half-tb {padding-top:20.5%; padding-bottom:20%;} .padding-twenty-one-tb {padding-top:21%; padding-bottom:21%;} .padding-twenty-one-half-tb {padding-top:21.5%; padding-bottom:21.5%;} .padding-twenty-two-tb {padding-top:22%; padding-bottom:22%;} .padding-twenty-two-half-tb {padding-top:22.5%; padding-bottom:22.5%;} .padding-twenty-three-tb {padding-top:23%; padding-bottom:23%;} .padding-twenty-three-half-tb {padding-top:23.5%; padding-bottom:23.5%;} .padding-twenty-four-tb {padding-top:24%; padding-bottom:24%;} .padding-twenty-four-half-tb {padding-top:24.5%; padding-bottom:24.5%;} .padding-twenty-five-tb {padding-top:25%; padding-bottom:25%;} .padding-thirty-tb {padding-top:30%; padding-bottom:30%;} .padding-5px-tb {padding-top:5px; padding-bottom:5px;} .padding-10px-tb {padding-top:10px; padding-bottom:10px;} .padding-15px-tb {padding-top:15px; padding-bottom:15px;} .padding-20px-tb {padding-top:20px; padding-bottom:20px;} .padding-25px-tb {padding-top:25px; padding-bottom:25px;} .padding-30px-tb {padding-top:30px; padding-bottom:30px;} .padding-35px-tb {padding-top:35px; padding-bottom:35px;} .padding-40px-tb {padding-top:40px; padding-bottom:40px;} .padding-45px-tb {padding-top:45px; padding-bottom:45px;} .padding-50px-tb {padding-top:50px; padding-bottom:50px;} .padding-55px-tb {padding-top:55px; padding-bottom:55px;} .padding-60px-tb {padding-top:60px; padding-bottom:60px;} .padding-65px-tb {padding-top:65px; padding-bottom:65px;} .padding-70px-tb {padding-top:70px; padding-bottom:70px;} .padding-75px-tb {padding-top:75px; padding-bottom:75px;} .padding-80px-tb {padding-top:80px; padding-bottom:80px;} .padding-85px-tb {padding-top:85px; padding-bottom:85px;} .padding-90px-tb {padding-top:90px; padding-bottom:90px;} .padding-95px-tb {padding-top:95px; padding-bottom:95px;} .padding-100px-tb {padding-top:100px; padding-bottom:100px;} /* padding left and right */ .padding-one-lr {padding-left:1%; padding-right:1%;} .padding-one-half-lr {padding-left:1.5%; padding-right:1.5%;} .padding-two-lr {padding-left:2%; padding-right:2%;} .padding-two-half-lr {padding-left:2.5%; padding-right:2.5%;} .padding-three-lr {padding-left:3%; padding-right:3%;} .padding-three-half-lr {padding-left:3.5%; padding-right:3.5%;} .padding-four-lr {padding-left:4%; padding-right:4%;} .padding-four-half-lr {padding-left:4.5%; padding-right:4.5%;} .padding-five-lr {padding-left:5%; padding-right:5%;} .padding-five-half-lr {padding-left:5.5%; padding-right:5.5%;} .padding-six-lr {padding-left:6%; padding-right:6%;} .padding-six-half-lr {padding-left:6.5%; padding-right:6.5%;} .padding-seven-lr {padding-left:7%; padding-right:7%;} .padding-seven-half-lr {padding-left:7.5%; padding-right:7.5%;} .padding-eight-lr {padding-left:8%; padding-right:8%;} .padding-eight-half-lr {padding-left:8.5%; padding-right:8.5%;} .padding-nine-lr {padding-left:9%; padding-right:9%;} .padding-nine-half-lr {padding-left:9.5%; padding-right:9.5%;} .padding-ten-lr {padding-left:10%; padding-right:10%;} .padding-ten-half-lr {padding-left:10.5%; padding-right:10.5%;} .padding-eleven-lr {padding-left:11%; padding-right:11%;} .padding-eleven-half-lr {padding-left:11.5%; padding-right:11.5%;} .padding-twelve-lr {padding-left:12%; padding-right:12%;} .padding-twelve-half-lr {padding-left:12.5%; padding-right:12.5%;} .padding-thirteen-lr {padding-left:13%; padding-right:13%;} .padding-thirteen-half-lr {padding-left:13.5%; padding-right:13.5%;} .padding-fourteen-lr {padding-left:14%; padding-right:14%;} .padding-fourteen-half-lr {padding-left:14.5%; padding-right:14.5%;} .padding-fifteen-lr {padding-left:15%; padding-right:15%;} .padding-fifteen-half-lr {padding-left:15.5%; padding-right:15.5%;} .padding-sixteen-lr {padding-left:16%; padding-right:16%;} .padding-sixteen-half-lr {padding-left:16.5%; padding-right:16.5%;} .padding-seventeen-lr {padding-left:17%; padding-right:17%;} .padding-seventeen-half-lr {padding-left:17.5%; padding-right:17.5%;} .padding-eighteen-lr {padding-left:18%; padding-right:18%;} .padding-eighteen-half-lr {padding-left:18.5%; padding-right:18.5%;} .padding-nineteen-lr {padding-left:19%; padding-right:19%;} .padding-nineteen-half-lr {padding-left:19.5%; padding-right:19.5%;} .padding-twenty-lr {padding-left:20%; padding-right:20%;} .padding-twenty-half-lr {padding-left:20.5%; padding-right:20.5%;} .padding-twenty-one-lr {padding-left:21%; padding-right:21%;} .padding-twenty-one-half-lr {padding-left:21.5%; padding-right:21.5%;} .padding-twenty-two-lr {padding-left:22%; padding-right:22%;} .padding-twenty-two-half-lr {padding-left:22.5%; padding-right:22.5%;} .padding-twenty-three-lr {padding-left:23%; padding-right:23%;} .padding-twenty-three-half-lr {padding-left:23.5%; padding-right:23.5%;} .padding-twenty-four-lr {padding-left:24%; padding-right:24%;} .padding-twenty-four-half-lr {padding-left:24.5%; padding-right:24.5%;} .padding-twenty-five-lr {padding-left:25%; padding-right:25%;} .padding-5px-lr {padding-left:5px; padding-right:5px;} .padding-10px-lr {padding-left:10px; padding-right:10px;} .padding-15px-lr {padding-left:15px; padding-right:15px;} .padding-20px-lr {padding-left:20px; padding-right:20px;} .padding-25px-lr {padding-left:25px; padding-right:25px;} .padding-30px-lr {padding-left:30px; padding-right:30px;} .padding-35px-lr {padding-left:35px; padding-right:35px;} .padding-40px-lr {padding-left:40px; padding-right:40px;} .padding-45px-lr {padding-left:45px; padding-right:45px;} .padding-50px-lr {padding-left:50px; padding-right:50px;} .padding-55px-lr {padding-left:55px; padding-right:55px;} .padding-60px-lr {padding-left:60px; padding-right:60px;} .padding-65px-lr {padding-left:65px; padding-right:65px;} .padding-70px-lr {padding-left:70px; padding-right:70px;} .padding-75px-lr {padding-left:75px; padding-right:75px;} .padding-80px-lr {padding-left:80px; padding-right:80px;} .padding-85px-lr {padding-left:85px; padding-right:85px;} .padding-90px-lr {padding-left:90px; padding-right:90px;} .padding-95px-lr {padding-left:95px; padding-right:95px;} .padding-100px-lr {padding-left:100px; padding-right:100px;} /* 01. GENERAL ----------- */ * { box-sizing: border-box; outline: none; } body, html { padding: 0; margin: 0; min-height: 100%; } body { overflow-x: hidden; background: #000000; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 28px; font-weight: 500; color: #808080; opacity: 0; pointer-events: none; } body.is-init { opacity: 1; } body.is-loaded { pointer-events: auto; } body.is-locked, body.is-loaded.is-locked, body.is-init.is-locked { pointer-events: none; } body.has-spotlight:before { content: ''; position: fixed; left: 0; top: 0; width: 100vh; height: 100vh; background: radial-gradient(ellipse at left top, #28282E 0%,#000000 70%); } /* --- Overlays --- */ .justbfitness-aside-overlay, .justbfitness-menu-overlay, .justbfitness-home-block-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 177; background: rgba(0,0,0,0.85); pointer-events: none; opacity: 0; transition: opacity 0.6s; } .justbfitness-home-block-overlay { z-index: 16; } .justbfitness-aside-overlay { z-index: 222; } .justbfitness-home-block-overlay { background: rgba(0,0,0,0.75); } .justbfitness-aside-shown .justbfitness-aside-overlay, .justbfitness-menu-fade .justbfitness-menu-overlay, .is-faded .justbfitness-home-block-overlay { opacity: 1; } /* --- Grid --- */ .justbfitness-row { display: flex; flex-direction: row; margin: 0 -20px; } .justbfitness-row.justbfitness-no-gap { margin: 0; } .justbfitness-row.justbfitness-small-gap { margin: 0 -10px; } .justbfitness-row-middle { align-items: center; } .justbfitness-row-fullheight { min-height: 100vh; align-items: stretch; } .justbfitness-col { margin: 0 20px; } .justbfitness-col.align-top { display: inline-flex; flex-direction: column; justify-content: flex-start; } .justbfitness-col.align-middle { display: inline-flex; flex-direction: column; justify-content: center; } .justbfitness-col.align-bottom { display: inline-flex; flex-direction: column; justify-content: flex-end; } .justbfitness-row.justbfitness-no-gap .justbfitness-col { margin: 0; } .justbfitness-row.justbfitness-small-gap .justbfitness-col { margin: 0 10px; } .justbfitness-col.col-12 { width: calc(100% - 40px); } .justbfitness-col.col-9 { width: calc(75% - 40px); } .justbfitness-col.col-8 { width: calc(66.66% - 40px); } .justbfitness-col.col-6 { width: calc(50% - 40px); } .justbfitness-col.col-4 { width: calc(33.33% - 40px); } .justbfitness-col.col-3 { width: calc(25% - 40px); } .justbfitness-col.col-2 { width: calc(16.665% - 40px); } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-12 { width: 100%; } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-9 { width: 75%; } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-8 { width: 66.66%; } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-6 { width: 50%; } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-4 { width: 33.33%; } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-3 { width: 25%; } .justbfitness-row.justbfitness-no-gap .justbfitness-col.col-2 { width: 16.665%; } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-12 { width: calc(100% - 20px); } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-9 { width: calc(75% - 20px); } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-8 { width: calc(66.66% - 20px); } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-6 { width: calc(50% - 20px); } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-4 { width: calc(33.33% - 20px); } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-3 { width: calc(25% - 20px); } .justbfitness-row.justbfitness-small-gap .justbfitness-col.col-2 { width: calc(16.665% - 20px); } .justbfitness-contact-row { display: flex; flex-direction: row; margin: 0 -10px; } .justbfitness-contact-col { margin: 0 10px; width: calc(50% - 20px); } .justbfitness-contact-col.col-4 { margin: 0 10px; width: calc(33.33% - 20px); } /* --- Section --- */ #justbfitness-home-works p.justbfitness-intro, section.justbfitness-section { margin-bottom: 150px; display: block; width: 100%; } .justbfitness-content section.justbfitness-section:last-child { margin-bottom: 0; } #justbfitness-home-contacts p.justbfitness-intro { margin-bottom: 80px; } /* --- Format --- */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-center img { margin-left: auto; margin-right: auto; } .align-right img { margin-left: auto; } /* --- Disable Selection --- */ a img, .justbfitness-tns-container, .justbfitness-albums-carousel-wrap, header#justbfitness-header a, .justbfitness-mobile-title-wrap, .justbfitness-page-title-wrap, .justbfitness-back-wrap, .justbfitness-select-disabled { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* --- JustBFitness Cursor --- */ .justbfitness-cursor { position: fixed; width: 32px; height: 32px; z-index: 2020; pointer-events: none; transition: opacity 0.3s; } .justbfitness-cursor.is-unloading, .justbfitness-cursor.is-inactive { opacity: 0; } .justbfitness-cursor span { display: block; width: 32px; height: 32px; position: absolute; left: 0; top: 0; } .justbfitness-cursor span.justbfitness-cursor-circle { border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; transition: transform 0.3s, border 0.3s, box-shadow 0.3s; box-shadow: 0 0 16px rgba(0,0,0,0.2); } .justbfitness-cursor.int-grab-v span.justbfitness-cursor-circle, .justbfitness-cursor.int-grab-h span.justbfitness-cursor-circle, .justbfitness-cursor.int-close span.justbfitness-cursor-circle, .justbfitness-cursor.int-link span.justbfitness-cursor-circle, .justbfitness-cursor.int-lightbox span.justbfitness-cursor-circle { border-color: #fff; transform: scale(2); border-width: 1px; box-shadow: 0 0 16px rgba(0,0,0,0.5); } .justbfitness-cursor.int-grab-v:not(.int-link) span.justbfitness-cursor-circle, .justbfitness-cursor.int-grab-h:not(.int-link) span.justbfitness-cursor-circle { transform: scale(1.5); } .justbfitness-cursor.int-grab-v.int-lightbox span.justbfitness-cursor-circle, .justbfitness-cursor.int-grab-h.int-lightbox span.justbfitness-cursor-circle { transform: scale(2); } .justbfitness-cursor span.justbfitness-cursor-label { font-size: 12px; line-height: 14px; left: 100%; top: 100%; transform-origin: 0 0; opacity: 0; text-shadow: 0 0 14px rgba(0,0,0,0.5); transition: opacity 0.3s, transform 0.3s; } .justbfitness-cursor span.justbfitness-cursor-label.justbfitness-cursor-close { transform: rotate(-90deg) translate(-3px, 10px); opacity: 0; } .justbfitness-cursor.int-close span.justbfitness-cursor-label.justbfitness-cursor-close { transform: rotate(-90deg) translate(-3px, 22px); opacity: 1; } .justbfitness-cursor span.justbfitness-cursor-label.justbfitness-cursor-zoom { transform: rotate(-90deg) translate(-3px, 10px); opacity: 0; } .justbfitness-cursor.int-lightbox span.justbfitness-cursor-label.justbfitness-cursor-zoom { transform: rotate(-90deg) translate(-3px, 22px); opacity: 1; } .justbfitness-cursor span.justbfitness-cursor-slider { opacity: 0; transform: rotate(45deg); transition: opacity 0.3s, transform 0.3s; } .justbfitness-cursor span.justbfitness-cursor-slider:before, .justbfitness-cursor span.justbfitness-cursor-slider:after { position: absolute; top: 50%; font-size: 24px; line-height: 30px; color: #fff; font-family: "LineAwesome"; transition: transform 0.3s; text-shadow: 0 0 14px rgba(0,0,0,0.5); z-index: 5; } .justbfitness-cursor span.justbfitness-cursor-slider:before { content: '\f111'; left: 0; transform: translate(-25px, -15px); } .justbfitness-cursor span.justbfitness-cursor-slider:after { content: '\f112'; right: 0; transform: translate(25px, -15px); } .justbfitness-cursor.int-grab-h:not(.int-link) span.justbfitness-cursor-slider, .justbfitness-cursor.int-grab-v:not(.int-link) span.justbfitness-cursor-slider { opacity: 1; } .justbfitness-cursor.int-grab-h span.justbfitness-cursor-slider { transform: rotate(0deg); } .justbfitness-cursor.int-grab-v span.justbfitness-cursor-slider { transform: rotate(90deg); } .justbfitness-cursor.int-grab-h:not(.int-link) span.justbfitness-cursor-slider:before, .justbfitness-cursor.int-grab-v:not(.int-link) span.justbfitness-cursor-slider:before { transform: translate(-35px, -15px); } .justbfitness-cursor.int-grab-h:not(.int-link) span.justbfitness-cursor-slider:after, .justbfitness-cursor.int-grab-v:not(.int-link) span.justbfitness-cursor-slider:after { transform: translate(35px, -15px); } .justbfitness-cursor.int-grab-h.int-lightbox span.justbfitness-cursor-slider:before, .justbfitness-cursor.int-grab-v.int-lightbox span.justbfitness-cursor-slider:before { transform: translate(-40px, -15px); } .justbfitness-cursor.int-grab-h:.int-lightbox span.justbfitness-cursor-slider:after, .justbfitness-cursor.int-grab-v:.int-lightbox span.justbfitness-cursor-slider:after { transform: translate(40px, -15px); } @keyframes justbfitness-circle-rotate { 0% { transform: rotate(0) scale(2); } 50% { transform: rotate(180deg) scale(2); } 100% { transform: rotate(360deg) scale(2); } } /* 02. TYPOGRAPHY -------------- */ nav.justbfitness-mobile-menu ul.main-menu > li > a, .justbfitness-cursor span.justbfitness-cursor-label, .justbfitness-slider-prev, .justbfitness-slider-next, .justbfitness-counter-value, .justbfitness-home-link span:last-child, .is-dropcap::first-letter, .justbfitness-back span:last-child, .justbfitness-progress-counter, h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #ffffff; text-transform: uppercase; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore a span, .justbfitness-counter-label, .justbfitness-progress-label, .justbfitness-home-link span:first-child, label, .justbfitness-aside-close, blockquote:before, .justbfitness-back span:first-child, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { display: block; color: #5C5C60; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; } .is-dropcap::first-letter, h1 { font-size: 60px; line-height: 65px; margin: 0 0 34px 0; } .justbfitness-counter-label, h1 span { font-size: 16px; line-height: 19px; margin: 0 0 -2px 0; } .justbfitness-albums-slider .justbfitness-album-item__explore, .justbfitness-home-link span:last-child, .justbfitness-back span:last-child, h2 { font-size: 50px; line-height: 55px; margin: 0 0 28px 0; } .justbfitness-albums-slider .justbfitness-album-item__explore span, .justbfitness-home-link span:first-child, .justbfitness-back span:first-child, h2 span { font-size: 14px; line-height: 18px; margin: 0 0 -3px 0; } h3 { font-size: 40px; line-height: 45px; margin: 0 0 25px 0; } h3 span { font-size: 14px; line-height: 18px; margin: 0 0 -1px 0; } .justbfitness-slider-prev, .justbfitness-slider-next, .justbfitness-progress-counter, h4 { font-size: 30px; line-height: 35px; margin: 0 0 20px 0; } h4 span { font-size: 12px; line-height: 15px; margin: 0 0 0 0; } nav.justbfitness-mobile-menu ul.main-menu > li > a, h5 { font-size: 24px; line-height: 29px; margin: 0 0 18px 0; } h5 span { font-size: 12px; line-height: 15px; margin: 0 0 0 0; } h6 { font-size: 20px; line-height: 25px; margin: 0 0 15px 0; } h6 span { font-size: 10px; line-height: 13px; margin: 0 0 0 0; } .justbfitness-col h1:last-child, .justbfitness-col h2:last-child, .justbfitness-col h3:last-child, .justbfitness-col h4:last-child, .justbfitness-col h5:last-child, .justbfitness-col h6:last-child { margin: 0; } .is-dropcap::first-letter { display: block; float: left; margin: -4px 20px 0 0; color: #fff; font-size: 75px; line-height: 80px; } p { margin: 0 0 28px 0; } a { position: relative; } a, a:hover, a:visited { text-decoration: none; color: #fff; } ol, ul { padding: 0 0 0 17px; margin: 0 0 28px 0; } ol li, ul li { padding: 0 0 0 13px; } blockquote { font-size: 20px; line-height: 32px; padding: 0 0 0 60px; margin: 0 0 32px 0; border: none; position: relative; } blockquote:before { content: '\201C'; display: block; font-size: 80px; line-height: 80px; position: absolute; left: 0; top: 0; } blockquote cite { display: block; text-align: right; color: #fff; font-weight: 700; font-size: 12px; line-height: 18px; font-style: normal; padding: 7px 0 0 0; } blockquote cite:before { content: '\2014'; display: inline-block; margin-right: 10px; } blockquote, p:last-child, ul:last-child, li:last-child { margin: 0; } p.justbfitness-intro:first-child:last-child { margin: 0 auto; } img { max-width: 100%; height: auto; display: block; } /* 03. FORMS AND FIELDS -------------------- */ label { font-size: 12px; line-height: 16px; margin: 0 0 5px 0; } input, textarea { display: block; width: 100%; height: 50px; color: #808080; background: rgba(0,0,0,0); border: 2px solid #313133; border-radius: 0; padding: 15px 20px 15px 20px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px; line-height: 16px; transition: background 0.3s, border 0.3s; } textarea { resize: none; line-height: 24px; height: 230px; } .justbfitness-button, button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; width: auto; padding: 15px 40px 15px 40px; margin: 0; font-family: 'Roboto', sans-serif; font-weight: 700; color: #ffffff; text-transform: uppercase; font-size: 14px; line-height: 16px; cursor: pointer; border: 2px solid #313133; transition: background 0.3s, border 0.3s, color 0.3s; } input:hover, textarea:hover { background: rgba(0,0,0,0.5); border-color: #5C5C60; } input::-webkit-input-placeholder { opacity: 1; color: #808080; } input::-moz-placeholder { opacity: 1; color: #808080; } input::-ms-input-placeholder { opacity: 1; color: #808080; } textarea::-webkit-input-placeholder { opacity: 1; color: #808080; } textarea::-moz-placeholder { opacity: 1; color: #808080; } textarea::-ms-input-placeholder { opacity: 1; color: #808080; } .justbfitness-button:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ffffff; } .justbfitness-contact-form__footer { display: flex; justify-content: space-between; align-items: center; } .justbfitness-contact-form__response { color: #ffffff; } .justbfitness-contact-form__submit { transition: opacity 0.3s; } .is-success .justbfitness-contact-form__submit { opacity: 0; pointer-events: none; } .alert-danger.justbfitness-contact-form__response { color: #cc4040; } /* Form Busy Mode */ form.justbfitness-contact-form { transition: opacity 0.5s, transform 0.5s; } form.justbfitness-contact-form.is-in-action { pointer-events: none; opacity: 0.5; position: relative; transform: scale(0.95); } form.justbfitness-contact-form.is-in-action:before { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%; z-index: 15; pointer-events: none; border: 2px solid rgba(255,255,255,0.5); border-top-color: rgba(255,255,255,1); width: 50px; height: 50px; margin: -24px 0 0 -24px; animation: busy_spin01 1s infinite ease-in-out; } @keyframes busy_spin01 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* 04. HEADER ---------- */ header#justbfitness-header { position: fixed; left: 0; top: 0; width: 100%; z-index: 221; transition: z-index 0.5s, transform 0.5s; } body.no-header-padding .justbfitness-header-holder { display: none; } header#justbfitness-header .justbfitness-header-inner { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 50px 50px 50px 50px; } /* --- Logo --- */ .justbfitness-logo { display: block; } .justbfitness-logo img { display: block; width: 100%; height: auto; } /* --- Navigation --- */ .justbfitness-nav-block { display: flex; flex-direction: row; } nav.justbfitness-nav ul li a.justbfitness-aside-toggler { width: 29px; height: 29px; opacity: 0.5; transition: opacity 0.3s; } nav.justbfitness-nav ul li a.justbfitness-aside-toggler:hover { opacity: 1; } a.justbfitness-aside-toggler span { display: block; width: 3px; height: 3px; border-radius: 1.5px; position: absolute; top: 13px; background: #ffffff; transform-origin: 50% 50%; } a.justbfitness-aside-toggler span:nth-child(1) { left: 5px; transition: transform 0.3s, opacity 0.3s; } a.justbfitness-aside-toggler span:nth-child(2) { left: 13px; } a.justbfitness-aside-toggler span:nth-child(3) { left: 21px; transition: transform 0.3s, opacity 0.3s; } a.justbfitness-aside-toggler span:nth-child(2):before, a.justbfitness-aside-toggler span:nth-child(2):after { content: ''; display: block; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -1px; width: 2px; height: 2px; transition: transform 0.3s; transform-origin: 50% 50%; background: #fff; } a.justbfitness-aside-toggler span:nth-child(2):before { transform: rotate(45deg) scaleX(1); } a.justbfitness-aside-toggler span:nth-child(2):after { transform: rotate(-45deg) scaleX(1); } /* --- Main Menu --- */ nav.justbfitness-nav ul { padding: 0; margin: 0; display: flex; } nav.justbfitness-nav ul li { display: block; position: relative; padding: 0; margin: 0; list-style: none; } nav.justbfitness-nav ul li a { transition: color 0.3s; color: rgba(255,255,255,0.5); font-size: 12px; line-height: 29px; font-family: 'Montserrat', sans-serif; font-weight: 500; text-transform: uppercase; display: block; letter-spacing: 0.6px; } nav.justbfitness-nav ul.main-menu { flex-direction: row; } nav.justbfitness-nav ul.main-menu > li { margin: 0 0 0 50px; } nav.justbfitness-nav ul.sub-menu { position: absolute; top: 100%; left: 0; flex-direction: column; width: auto; transition: opacity 0.3s; opacity: 0; padding: 20px 0 0 0; pointer-events: none; } nav.justbfitness-nav ul.sub-menu.justbfitness-menu-offset { left: auto; right: 0; text-align: right; } nav.justbfitness-nav ul.sub-menu ul.sub-menu { position: absolute; left: 100%; top: 0; flex-direction: column; width: auto; transition: opacity 0.3s; opacity: 0; padding: 0 0 0 60px; pointer-events: none; } nav.justbfitness-nav ul.sub-menu ul.sub-menu.justbfitness-menu-offset { left: auto; right: 100%; padding-left: 0; padding-right: 60px; } nav.justbfitness-nav ul.sub-menu ul.sub-menu:before { content: ''; position: absolute; top: 33px; left: 20px; width: 20px; height: 1px; background: rgba(255,255,255,0.15); transition: opacity 0.5s; pointer-events: none; } nav.justbfitness-nav ul.sub-menu ul.sub-menu.justbfitness-menu-offset:before { left: auto; right: 20px; } nav.justbfitness-nav li:hover > ul.sub-menu { opacity: 1; pointer-events: auto; } nav.justbfitness-nav ul.sub-menu a { padding: 20px 0 0 0; display: block; white-space: nowrap; } nav.justbfitness-nav ul.main-menu li:hover > a, nav.justbfitness-nav ul.main-menu li.current-menu-parent > a, nav.justbfitness-nav ul.main-menu li.current-menu-item > a, nav.justbfitness-nav ul.main-menu li.current-menu-ancestor > a { color: rgba(255,255,255,1); } /* 05. CONTENT ----------- */ .justbfitness-content-wrap { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: center; transition: transform 0.5s; } .justbfitness-smooth-scroll .justbfitness-content-wrap { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 5; display: block; } .justbfitness-content { width: calc(100% - 374px); max-width: 1280px; margin: auto; min-height: 100%; padding-top: 100px; padding-bottom: 90px; } .no-top-padding .justbfitness-content { padding-top: 0; } .no-bottom-padding .justbfitness-content { padding-bottom: 0; } .justbfitness-content-scroll.is-centered .justbfitness-content { display: flex; flex-direction: column; justify-content: center; } /* --- Page Title --- */ .justbfitness-page-title-wrap { position: fixed; top: 0; width: 100vh; display: flex; justify-content: center; transform-origin: 0% 0%; transform: rotate(-90deg); transition: transform 0.5s; z-index: 3; cursor: default; pointer-events: none; } .justbfitness-albums-slider-wrap .justbfitness-album-item__title, .justbfitness-page-title-wrap { left: 136px; } .justbfitness-mobile-title-wrap:before, .justbfitness-page-title-wrap:before { content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.15); position: absolute; left: 0; top: 23px; } .justbfitness-mobile-title-wrap h1, .justbfitness-page-title-wrap h1 { display: block; padding-left: 100px; margin: 0; color: rgba(255,255,255,0.5); font-family: 'Roboto Condensed', sans-serif; transition: padding 0.5s, opacity 0.5s; opacity: 0; } .justbfitness-mobile-title-wrap h1 span, .justbfitness-page-title-wrap h1 span { display: block; margin: 0 0 3px 0; transform: translateX(-100px); transition: transform 0.5s, opacity 0.5s; } .justbfitness-mobile-title-wrap h1, .justbfitness-page-title-wrap.is-loaded h1 { opacity: 1; padding-left: 50px; } .justbfitness-mobile-title-wrap h1 span, .justbfitness-page-title-wrap.is-loaded h1 span { transform: translateX(-50px); } .justbfitness-albums-template--slider .justbfitness-page-title-wrap.is-loaded h1 span { color: rgba(255,255,255,0.3); } .justbfitness-mobile-title-wrap { position: relative; width: 100%; text-align: center; } .justbfitness-mobile-title-wrap h1 { padding: 0; text-align: center; } .justbfitness-mobile-title-wrap:before { width: 200vw; left: 50%; top: 19px; transform: translateX(-50%); } .justbfitness-mobile-title-wrap h1 span { margin-bottom: 7px; } /* --- Back Button --- */ .justbfitness-back-wrap { position: fixed; top: 200%; left: calc(100vw - 182px); width: 100vh; display: flex; justify-content: flex-start; transform-origin: 0% 0%; transform: rotate(-90deg) translate(0, 0); z-index: 15; cursor: default; text-align: right; padding-left: 100px; } .justbfitness-back-wrap:before { content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.15); position: absolute; left: 0; top: 21px; } .justbfitness-back-wrap .justbfitness-back { padding-right: 25px; cursor: pointer; pointer-events: none; } .justbfitness-back span { display: block; transition: transform 0.5s, color 0.5s; } /* Before Load State */ .justbfitness-back-wrap .justbfitness-back span:first-child { margin: 0 0 3px 0; transform: translateX(65px); color: rgba(92,92,96,0); } .justbfitness-back-wrap .justbfitness-back span:last-child { margin: 0; color: rgba(255,255,255,0); transform: translateX(-40px); } .justbfitness-back-wrap.is-loaded .justbfitness-back:not(.is-to-top), .has-to-top .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top { pointer-events: auto; } .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top:hover.in-action, .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top.in-action { pointer-events: none; } /* Normal State */ .justbfitness-back-wrap.is-loaded .justbfitness-back:not(.is-to-top) span:first-child, .has-to-top .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top span:first-child { margin: 0 0 3px 0; color: rgba(92,92,96,1); transform: translateX(25px); } .justbfitness-back-wrap.is-loaded .justbfitness-back:not(.is-to-top) span:last-child, .has-to-top .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top span:last-child { margin: 0; color: rgba(255,255,255,0.5); transform: translateX(0px); } /* Hover State */ .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top:hover span:first-child, .justbfitness-back-wrap.is-loaded .justbfitness-back:hover span:first-child { transform: translateX(15px); } .justbfitness-back-wrap.is-loaded .justbfitness-back.is-to-top:hover span:last-child, .justbfitness-back-wrap.is-loaded .justbfitness-back:hover span:last-child { transform: translateX(10px); color: #fff; } .justbfitness-back-wrap .justbfitness-back.in-action, .has-to-top .justbfitness-back-wrap .justbfitness-back.in-action { pointer-events: none; } /* Remove to Inactive State */ body:not(.has-to-top) .justbfitness-back-wrap .justbfitness-back.is-to-top { pointer-events: none; } body:not(.has-to-top) .justbfitness-back-wrap .justbfitness-back.is-to-top span:first-child, .justbfitness-back-wrap .justbfitness-back.in-action.is-to-top span:first-child, .justbfitness-back-wrap .justbfitness-back.in-action span:first-child, .has-to-top .justbfitness-back-wrap .justbfitness-back.in-action.is-to-top span:first-child, .has-to-top .justbfitness-back-wrap .justbfitness-back.in-action span:first-child { margin: 0 0 3px 0; transform: translateX(-35px); color: rgba(92,92,96,0); } body:not(.has-to-top) .justbfitness-back-wrap .justbfitness-back.is-to-top span:last-child, .justbfitness-back-wrap .justbfitness-back.in-action.is-to-top span:last-child, .justbfitness-back-wrap .justbfitness-back.in-action span:last-child, .has-to-top .justbfitness-back-wrap .justbfitness-back.in-action.is-to-top span:last-child, .has-to-top .justbfitness-back-wrap .justbfitness-back.in-action span:last-child { margin: 0; color: rgba(255,255,255,0); transform: translateX(60px); } /* 06. FOOTER ---------- */ footer#justbfitness-footer { position: relative; z-index: 5; transition: opacity 0.5s; } .justbfitness-content-shown footer#justbfitness-footer { opacity: 0; } .justbfitness-albums-template--slider footer#justbfitness-footer, .justbfitness-albums-template--carousel footer#justbfitness-footer, .justbfitness-home-template footer#justbfitness-footer { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 101; } .justbfitness-footer-inner { display: flex; flex-direction: row; justify-content: space-between; color: rgba(255, 255, 255, 0.5); font-size: 12px; line-height: 1; font-weight: 700; font-family: 'Roboto', sans-serif; letter-spacing: 0.6px; padding: 25px 50px 26px 50px; } .justbfitness-footer-inner a { transition: color 0.3s; color: rgba(255, 255, 255, 0.5); } .justbfitness-footer-inner a:hover { color: rgba(255, 255, 255, 1); } .justbfitness-footer-inner ul { padding: 0; margin: 0; display: flex; flex-direction: row; } .justbfitness-footer-inner ul li { padding: 0; margin: 0 40px 0 0; list-style: none; } .justbfitness-footer-inner ul li:last-child { margin: 0; } .justbfitness-footer__copyright { text-transform: uppercase; cursor: default; } /* 07. ASIDE BAR ------------- */ aside#justbfitness-aside { position: fixed; right: 0; top: 0; width: 384px; height: 100%; background: #17171B; display: block; z-index: 333; pointer-events: none; transform: translateX(100%); transition: transform 0.5s; } .justbfitness-aside-close { font-size: 14px; line-height: 18px; text-transform: uppercase; transform-origin: 100% 50%; position: absolute; left: 0%; top: 20px; display: block; padding-left: 23px; transform: translateX(calc(-100% - 25px)) rotate(-90deg); opacity: 0; transition: color 0.3s, opacity 0.5s; } .justbfitness-aside-shown aside#justbfitness-aside { pointer-events: auto; transform: translateX(0); } .justbfitness-aside-shown .justbfitness-aside-close { opacity: 1; } .justbfitness-aside-shown.justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap, .justbfitness-aside-shown.justbfitness-albums-template--slider .justbfitness-albums-slider-wrap, .justbfitness-aside-shown main.justbfitness-content-wrap, .justbfitness-aside-shown .justbfitness-home-wrap, .justbfitness-aside-shown header#justbfitness-header { pointer-events: none; transform: translateX(-192px); } .justbfitness-aside-shown .justbfitness-page-title-wrap { transform: rotate(-90deg) translateY(-192px); } .justbfitness-aside-shown .justbfitness-aside-overlay { pointer-events: auto; cursor: pointer; } .justbfitness-aside-close:before, .justbfitness-aside-close:after { content: ''; position: absolute; width: 12px; height: 2px; background: #5C5C60; display: block; transform-origin: 50% 50%; left: 0; top: 8px; transition: background 0.3s; } .justbfitness-aside-close:before { transform: rotate(45deg); } .justbfitness-aside-close:after { transform: rotate(-45deg); } .justbfitness-aside-close:hover { color: #ffffff; } .justbfitness-aside-close:hover:before, .justbfitness-aside-close:hover:after { background: #fff; } .justbfitness-aside-inner { position: absolute; top: 0; left: 0; width: calc(100% + 40px); height: 100%; overflow-y: scroll; } .justbfitness-aside-content { max-width: 384px; padding: 40px 40px; } /* --- Aside Widgets --- */ .justbfitness-widget { margin: 0 0 85px 0; } .justbfitness-widget p { font-size: 15px; line-height: 28px; margin-bottom: 28px; } .justbfitness-widget p:last-child, .justbfitness-widget:last-child { margin: 0; } a.justbfitness-learn-more { display: inline-block; font-size: 12px; line-height: 20px; text-transform: uppercase } a.justbfitness-learn-more:after { content: '\f112'; font-family: "LineAwesome"; font-size: 14px; line-height: 20px; display: inline-block; margin: 0 0 0 10px; transition: margin 0.3s; } a.justbfitness-learn-more:hover:after { margin: 0 0 0 20px; } /* About Widget */ .justbfitness-widget--about__head { position: relative; margin: 0 0 28px 0; } .justbfitness-widget--about__head img { display: block; width: 150px; height: auto; border-radius: 50%; } .justbfitness-widget--about__head h5 { position: absolute; text-align: right; width: 100%; display: block; right: 0; top: 50%; transform: translateY(-50%); } .justbfitness-signature-wrap { padding: 20px 0 0 0; } /* Contacts Widget */ .justbfitness-widget--contacts .justbfitness-contact-details__list { padding: 5px 0 0 0; margin-bottom: 28px; } .justbfitness-widget--contacts .justbfitness-contact-details__list li { font-size: 14px; } /* 08. HOME TEMPLATE ----------------- */ .justbfitness-home-background { opacity: 0.75; transition: left 0.5s; } .justbfitness-home-background video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; } .justbfitness-home-template > #justbfitness-home-works, .justbfitness-home-template > #justbfitness-home-contacts { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; } .justbfitness-home-template .justbfitness-content { opacity: 0; } #justbfitness-home-works { padding-bottom: 63px; } /* --- Home Links --- */ .justbfitness-home-link-wrap { position: fixed; top: 100%; left: calc(100vw - 182px); width: 100vh; display: flex; justify-content: flex-start; transform-origin: 0% 0%; transform: rotate(-90deg) translate(0, 0); z-index: 15; cursor: default; text-align: right; padding-left: 100px; } .is-faded .justbfitness-home-link-wrap:hover { z-index: 25; } .justbfitness-home-link-wrap:before { content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.15); position: absolute; left: 0; top: 21px; } .justbfitness-home-link--works.justbfitness-home-link-wrap { left: calc(33.33% - 21px); text-align: center; padding: 0; top: 0; } .justbfitness-home-link--works.justbfitness-home-link-wrap .justbfitness-home-link { margin: 0 auto; } .justbfitness-home-link--works span:first-child { text-align: left; } .justbfitness-home-link--contacts.justbfitness-home-link-wrap { left: calc(66.66% + 21px); text-align: left; top: 200%; } .justbfitness-home-link--contacts span:first-child { text-align: right; } body.is-loaded .justbfitness-home-link-wrap { transition: transform 0.5s, z-index 0.6s; } body.justbfitness-aside-shown .justbfitness-home-link-wrap { transform: rotate(-90deg) translate(0, -192px); } .justbfitness-home-link { cursor: pointer; } .justbfitness-home-link span { display: block; transition: transform 0.5s, color 0.5s; } .justbfitness-home-link-wrap span:last-child { font-family: 'Roboto Condensed', sans-serif; } .justbfitness-home-link--works.is-inactive.is-loaded .justbfitness-home-link:hover span:first-child, .justbfitness-home-link--works.is-inactive.is-loaded span:first-child, .justbfitness-home-link--works.is-inactive span:first-child, .justbfitness-home-link--works span:first-child { margin: 0 0 3px 0; transform: translateX(-100px); color: rgba(255,255,255,0); } .justbfitness-home-link--works.is-inactive.is-loaded .justbfitness-home-link:hover span:last-child, .justbfitness-home-link--works.is-inactive.is-loaded span:last-child, .justbfitness-home-link--works.is-inactive span:last-child, .justbfitness-home-link--works span:last-child { margin: 0; color: rgba(255,255,255,0); transform: translateX(50px); } .justbfitness-home-link--contacts.is-inactive.is-loaded .justbfitness-home-link:hover span:first-child, .justbfitness-home-link--contacts.is-inactive.is-loaded span:first-child, .justbfitness-home-link--contacts.is-inactive span:first-child, .justbfitness-home-link--contacts span:first-child { margin: 0 0 3px 0; transform: translateX(100px); color: rgba(255,255,255,0); } .justbfitness-home-link--contacts.is-inactive.is-loaded .justbfitness-home-link:hover span:last-child, .justbfitness-home-link--contacts.is-inactive.is-loaded span:last-child, .justbfitness-home-link--contacts.is-inactive span:last-child, .justbfitness-home-link--contacts span:last-child { margin: 0; color: rgba(255,255,255,0); transform: translateX(-50px); } .justbfitness-home-link-wrap.is-loaded .justbfitness-home-link { pointer-events: auto; } .justbfitness-home-link--works.is-loaded span:first-child { color: rgba(255,255,255,0.6); transform: translateX(-50px); } .justbfitness-home-link--works.is-loaded span:last-child { color: rgba(255,255,255,0.5); transform: translateX(0px); } .justbfitness-home-link--contacts.is-loaded span:first-child { color: rgba(255,255,255,0.6); transform: translateX(50px); } .justbfitness-home-link--contacts.is-loaded span:last-child { color: rgba(255,255,255,0.5); transform: translateX(0px); } .justbfitness-home-link--works.is-loaded .justbfitness-home-link:hover span:first-child { transform: translateX(-40px); color: rgba(255,255,255,0.8); } .justbfitness-home-link--works.is-loaded .justbfitness-home-link:hover span:last-child { transform: translateX(-10px); color: #fff; } .justbfitness-home-link--contacts.is-loaded .justbfitness-home-link:hover span:first-child { color: rgba(255,255,255,0.8); transform: translateX(40px); } .justbfitness-home-link--contacts.is-loaded .justbfitness-home-link:hover span:last-child { transform: translateX(10px); color: #fff; } /* 09. ALBUMS LISTING ------------------ */ .justbfitness-grid { margin: -20px; display: flex; flex-wrap: wrap; } .justbfitness-grid.justbfitness-small-gap { margin: -10px; } .justbfitness-grid.justbfitness-no-gap { margin: 0; } .justbfitness-grid .justbfitness-grid-item { margin: 20px; } .justbfitness-grid.justbfitness-small-gap .justbfitness-grid-item { margin: 10px; } .justbfitness-grid.justbfitness-no-gap .justbfitness-grid-item { margin: 0; } .justbfitness-grid-1cols .justbfitness-grid-item { width: calc(100% - 40px); } .justbfitness-grid-2cols .justbfitness-grid-item { width: calc(50% - 40px); } .justbfitness-grid-3cols .justbfitness-grid-item { width: calc(33.33% - 40px); } .justbfitness-grid-4cols .justbfitness-grid-item { width: calc(25% - 40px); } .justbfitness-grid-5cols .justbfitness-grid-item { width: calc(20% - 40px); } .justbfitness-small-gap.justbfitness-grid-1cols .justbfitness-grid-item { width: calc(100% - 20px); } .justbfitness-small-gap.justbfitness-grid-2cols .justbfitness-grid-item { width: calc(50% - 20px); } .justbfitness-small-gap.justbfitness-grid-3cols .justbfitness-grid-item { width: calc(33.33% - 20px); } .justbfitness-small-gap.justbfitness-grid-4cols .justbfitness-grid-item { width: calc(25% - 20px); } .justbfitness-small-gap.justbfitness-grid-5cols .justbfitness-grid-item { width: calc(20% - 20px); } .justbfitness-no-gap.justbfitness-grid-1cols .justbfitness-grid-item { width: 100%; } .justbfitness-no-gap.justbfitness-grid-2cols .justbfitness-grid-item { width: 50%; } .justbfitness-no-gap.justbfitness-grid-3cols .justbfitness-grid-item { width: 33.33%; } .justbfitness-no-gap.justbfitness-grid-4cols .justbfitness-grid-item { width: 25%; } .justbfitness-no-gap.justbfitness-grid-5cols .justbfitness-grid-item { width: 20%; } /* --- Albums Grid --- */ .justbfitness-album-item { position: relative; overflow: hidden; } .justbfitness-album-item a.justbfitness-album-item__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; } .justbfitness-album-item .justbfitness-album-item__image { overflow: hidden; } .justbfitness-album-item img { width: 100%; height: auto; display: block; transition: transform 0.5s; backface-visibility: visible; } .justbfitness-album-item:hover img { transform: scale(1.05); } .justbfitness-album-item h5 { margin: 0 0 -5px 0; padding: 15px 0 0 0; } /* --- Albums Carousel --- */ .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap { position: fixed; left: 0; max-width: none; overflow: hidden; transition: transform 0.5s; width: 100%; height: 100%; } .justbfitness-albums-carousel { white-space: nowrap; cursor: grab; } .justbfitness-albums-carousel.is-grabbed { cursor: grabbing; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap .justbfitness-albums-carousel { position: absolute; left: 0; top: 0; font-size: 0; line-height: 0; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap .justbfitness-albums-carousel.is-medium { top: 0; padding: 25vh 0; height: 100vh; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap div.justbfitness-album-item { display: inline-block; transition: opacity 0.5s, transform 0.5s; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel.is-hovered div.justbfitness-album-item { opacity: 0.25; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel.is-hovered div.justbfitness-album-item:hover { opacity: 1; transform: scale(1.05); } .justbfitness-albums-template--carousel .justbfitness-albums-carousel.is-medium.is-hovered div.justbfitness-album-item:hover { opacity: 1; transform: scale(1.1); } .justbfitness-albums-carousel-wrap .justbfitness-album-item__inner { position: relative; overflow: hidden; margin: 0 50px 0 0; } .justbfitness-albums-carousel-wrap .justbfitness-album-item img { max-height: 100%; height: 100%; width: auto; transform: scale(1.1); transition: none; backface-visibility: hidden; } .justbfitness-albums-carousel-wrap .justbfitness-album-item .justbfitness-button { position: absolute; right: 30px; bottom: 30px; z-index: 5; border-color: #fff; background: rgba(0,0,0,0.2); opacity: 0.7; transition: opacity 0.3s; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-shadow: 0 0 10px rgba(0,0,0,0.1); } .justbfitness-albums-carousel-wrap .justbfitness-album-item .justbfitness-button span { display: block; transition: transform 0.3s; } .justbfitness-albums-carousel-wrap .justbfitness-album-item .justbfitness-button:before { content: ''; position: absolute; top: -50px; right: -50px; bottom: -50px; left: -50px; pointer-events: none; } .justbfitness-albums-carousel-wrap .justbfitness-album-item .justbfitness-button:hover { opacity: 1; } .justbfitness-albums-carousel-wrap .justbfitness-album-item .justbfitness-button:hover:before { pointer-events: auto; } .justbfitness-albums-carousel-wrap .justbfitness-album-item__title { position: absolute; top: 100%; width: 100vh; display: flex; justify-content: center; transform-origin: 0% 0%; transform: rotate(-90deg); transition: left 1s, opacity 0.5s; z-index: 3; cursor: default; pointer-events: none; left: 30px; opacity: 0.5; } .justbfitness-albums-carousel-wrap .justbfitness-album-item__title:before { content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.15); position: absolute; left: 0; top: 23px; } .justbfitness-albums-carousel-wrap .justbfitness-album-item__title h2 { display: block; padding-left: 100px; margin: 0; color: #ffffff; font-family: 'Roboto Condensed', sans-serif; transition: padding 1s, opacity 1s; opacity: 0; padding-left: 100px; } .justbfitness-albums-carousel-wrap .justbfitness-album-item__title h2 span { display: block; margin: 0 0 3px 0; transform: translateX(-100px); opacity: 0.7; transition: transform 1s; color: #ffffff; } .justbfitness-albums-carousel.is-medium .justbfitness-album-item__title h2 { font-size: 30px; line-height: 35px; } .justbfitness-albums-carousel.is-medium .justbfitness-album-item__title h2 span { font-size: 12px; line-height: 15px; } .justbfitness-albums-carousel.is-medium .justbfitness-album-item__title:before { top: 17px; } .justbfitness-albums-carousel-wrap .is-inview .justbfitness-album-item__title h2 { opacity: 1; padding-left: 50px; } .justbfitness-albums-carousel-wrap .is-inview .justbfitness-album-item__title h2 span { transform: translateX(-50px); } .justbfitness-albums-carousel-wrap .is-hovered .is-inview .justbfitness-album-item__title h2 { transition: padding 0.5s, opacity 0.5s; } .justbfitness-albums-carousel-wrap .is-hovered .is-inview .justbfitness-album-item__title h2 span { transition: transform 0.5s; } .justbfitness-albums-carousel-wrap .is-hovered div.justbfitness-album-item:hover .is-inview .justbfitness-album-item__title { opacity: 1; } .justbfitness-albums-carousel-wrap .is-hovered div.justbfitness-album-item:hover .is-inview .justbfitness-album-item__title h2 { opacity: 1; padding-left: 0; } .justbfitness-albums-carousel-wrap .is-hovered div.justbfitness-album-item:hover .is-inview .justbfitness-album-item__title h2 span { transform: translateX(-10px); } .justbfitness-albums-carousel-wrap .justbfitness-album-item__overlay { position: absolute; opacity: 0; transition: opacity 1s; pointer-events: none; width: 50%; height: 100%; left: -1px; top: 0; background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, #000 100%); opacity: 0.75; } .justbfitness-albums-carousel-progress { width: 33.33vw; height: 1px; background: #313133; border-radius: 1px; position: absolute; left: 33.33vw; top: calc(75vh + 100px); } .justbfitness-albums-carousel-progress > div { background: #ffffff; width: 0; height: 2px; border-radius: 1px; position: absolute; left: 0; top: -1px; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap .justbfitness-albums-carousel.is-vertical { top: 0; left: 0; height: auto; white-space: normal; position: static; margin: 0 auto; width: 50vw; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap .justbfitness-albums-carousel.is-vertical div.justbfitness-album-item { display: flex; align-items: center; justify-content: center; width: 100%; transition: opacity 0.5s, transform 0.5s; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap .justbfitness-albums-carousel.is-vertical div.justbfitness-album-item .justbfitness-album-item__inner { width: 100%; margin: 0 0 50px 0; } .justbfitness-albums-template--carousel .justbfitness-albums-carousel-wrap .justbfitness-albums-carousel.is-vertical div.justbfitness-album-item img { width: 100%; height: auto; } /* --- Albums Slider --- */ .justbfitness-albums-template--slider .justbfitness-albums-slider-wrap { position: fixed; left: 0; top: 0; max-width: none; overflow: hidden; transition: transform 0.5s; width: 100%; height: 100%; } .justbfitness-albums-slider { white-space: nowrap; cursor: grab; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; min-width: 100%; height: 100%; } .justbfitness-albums-slider.is-grabbed { cursor: grabbing; } .justbfitness-albums-slider .justbfitness-album-item { display: inline-block; vertical-align: top; width: 100vw; height: 100vh; position: relative; } .justbfitness-albums-slider .justbfitness-album-item .justbfitness-album-item__image { background: no-repeat center; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.75; } .justbfitness-albums-slider.is-fade .justbfitness-album-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .justbfitness-albums-slider.is-fade .justbfitness-album-item.is-active { pointer-events: auto; } /* Slide Button */ .justbfitness-albums-slider-wrap .justbfitness-album-item .justbfitness-album-item__content { position: absolute; left: 0; width: 100%; bottom: 90px; text-align: center; z-index: 5; } .justbfitness-albums-slider-wrap .justbfitness-album-item .justbfitness-button { border-color: #fff; background: rgba(0,0,0,0.2); opacity: 0.7; transition: opacity 0.3s; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-shadow: 0 0 10px rgba(0,0,0,0.1); margin: 0 auto; } .justbfitness-albums-slider-wrap .justbfitness-album-item .justbfitness-button span { display: block; transition: transform 0.3s; } .justbfitness-albums-slider-wrap .justbfitness-album-item .justbfitness-button:before { content: ''; position: absolute; top: -50px; right: -50px; bottom: -50px; left: -50px; pointer-events: none; } .justbfitness-albums-slider-wrap .justbfitness-album-item .justbfitness-button:hover { opacity: 1; } .justbfitness-albums-slider-wrap .justbfitness-album-item .justbfitness-button:hover:before { pointer-events: auto; } /* Slide Title */ .justbfitness-albums-slider-wrap .justbfitness-album-item__explore, .justbfitness-albums-slider-wrap .justbfitness-album-item__title { position: absolute; top: 100%; width: 100vh; display: flex; justify-content: center; transform-origin: 0% 0%; transform: rotate(-90deg); transition: left 1s, opacity 0.5s; z-index: 3; cursor: default; pointer-events: none; opacity: 1; } .justbfitness-albums-slider-wrap .justbfitness-album-item__title { top: 0; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore { left: calc(100vw - 182px); justify-content: flex-start; padding-left: 180px; pointer-events: auto; top: 200%; } .justbfitness-albums-slider-wrap .is-copy .justbfitness-album-item__title, .justbfitness-albums-slider-wrap .is-copy .justbfitness-album-item__explore { top: 100%; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore:before, .justbfitness-albums-slider-wrap .justbfitness-album-item__title:before { content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 22px; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore a, .justbfitness-albums-slider-wrap .justbfitness-album-item__title h2 { display: block; padding-left: 100px; margin: 0; color: #ffffff; font-family: 'Roboto Condensed', sans-serif; opacity: 1; padding-left: 100px; opacity: 0; text-shadow: 0 5px 10px rgba(0,0,0,0.1); transition: opacity 0.5s, padding 0.5s; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore.is-loaded a, .justbfitness-albums-slider-wrap .justbfitness-album-item__title.is-loaded h2 { opacity: 0.5; padding-left: 50px; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore a { display: inline-block; text-transform: uppercase; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore a span, .justbfitness-albums-slider-wrap .justbfitness-album-item__title h2 span { display: block; margin: 0 0 3px 0; transform: translateX(-150px); opacity: 0.7; color: #ffffff; transition: transform 0.5s; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore.is-loaded a span, .justbfitness-albums-slider-wrap .justbfitness-album-item__title.is-loaded h2 span { transform: translateX(-50px); } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore a:hover { opacity: 1; padding-left: 40px; } .justbfitness-albums-slider-wrap .justbfitness-album-item__explore a:hover span { transform: translateX(-30px); } .justbfitness-albums-slider-wrap .is-fade .justbfitness-album-item__explore { pointer-events: none; } .justbfitness-albums-slider-wrap .is-fade .is-active .justbfitness-album-item__explore { pointer-events: auto; } .justbfitness-albums-slider-wrap .justbfitness-album-item__overlay { position: absolute; opacity: 0; transition: opacity 1s; pointer-events: none; width: 33.33%; height: 100%; left: -1px; top: 0; background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, #000 100%); opacity: 0.75; } /* Slider Navigation */ .justbfitness-slider-prev, .justbfitness-slider-next { position: absolute; bottom: 55px; transition: opacity 0.5s; opacity: 0; margin: 0; z-index: 15; text-shadow: 2px 3px 10px rgba(0,0,0,0.2); } .justbfitness-slider-prev.is-loaded, .justbfitness-slider-next.is-loaded { opacity: 0.5; } .justbfitness-slider-prev.is-loaded:hover, .justbfitness-slider-next.is-loaded:hover { opacity: 1; } .justbfitness-slider-prev.is-disabled, .justbfitness-slider-next.is-disabled { opacity: 0.3; } .justbfitness-slider-prev { left: 50px; } .justbfitness-slider-next { right: 50px; } /* 10. ALBUMS POSTS ---------------- */ a.justbfitness-lightbox-link { display: block; overflow: hidden; } .justbfitness-justified-gallery.justified-gallery > .entry-visible > img, .justbfitness-justified-gallery.justified-gallery > .entry-visible > a.justbfitness-lightbox-link > img, a.justbfitness-lightbox-link img { transition: transform 0.3s, opacity 0.5s; } a.justbfitness-lightbox-link:hover img { transform: scale(1.05); } /* --- Bricks Layout --- */ .justbfitness-gallery-bricks { display: flex; flex-direction: row; flex-wrap: wrap; margin: -20px; } .justbfitness-gallery-bricks .justbfitness-gallery-item { margin: 20px; } .justbfitness-gallery-bricks .justbfitness-gallery-item img { display: block; width: 100%; height: auto; } .justbfitness-gallery-bricks.is-1x2 .justbfitness-gallery-item { width: calc(50% - 40px); } .justbfitness-gallery-bricks.is-1x2 .justbfitness-gallery-item:nth-child(3n) { width: calc(100% - 40px); } .justbfitness-gallery-bricks.is-2x3 .justbfitness-gallery-item.is-large { width: calc(50% - 40px); } .justbfitness-gallery-bricks.is-2x3 .justbfitness-gallery-item.is-small { width: calc(33.33% - 40px); } /* --- Adjusted --- */ .justbfitness-gallery-adjusted .justbfitness-grid-item { display: inline-flex; flex-direction: column; justify-content: center; } /* 11. ELEMENTS ------------ */ a.justbfitness-more-link { display: inline-block; text-transform: uppercase } a.justbfitness-more-link:after { content: '\f112'; font-family: "LineAwesome"; font-size: 20px; line-height: 20px; display: inline-block; margin: 0 0 0 10px; transform: translateY(2px); transition: margin 0.3s; } a.justbfitness-more-link:hover:after { margin: 0 0 0 20px; } .justbfitness-page-background { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center; background-size: cover; } /* --- Contact Elements --- */ p.justbfitness-intro { max-width: 735px; text-align: center; display: block; margin: 0 auto 50px auto; } .justbfitness-contact-details__list { padding: 10px 0 0 0; margin: 0; } .justbfitness-contact-details__list li { padding: 0 0 0 60px; margin: 22px 0 0 0; list-style: none; position: relative; min-height: 40px; } .justbfitness-contact-details__list li:first-child { margin: 0; } .justbfitness-contact-details__list a { color: #808080; transition: color 0.3s; } .justbfitness-contact-details__list a:hover { color: #ffffff; } .justbfitness-contact-icon { width: 40px; height: 40px; border: 2px solid #5C5C60; border-radius: 20px; text-align: center; font-size: 24px; line-height: 36px; transform: translateY(-4px); position: absolute; left: 0; top: 0; } .justbfitness-contact-socials a { display: inline-block; margin-right: 17px; } /* --- Services Block --- */ .justbfitness-service-item { display: flex; flex-direction: row; align-items: center; padding-top: 40px; } .justbfitness-service-item:nth-child(even ) { flex-direction: row-reverse; } .justbfitness-service-item .justbfitness-service-item__image { width: calc(50% - 20px); } .justbfitness-service-item .justbfitness-service-item__image .justbfitness-parallax-img { box-shadow: 0 0 25px rgba(0,0,0,0.3); background-repeat: no-repeat; background-size: cover; background-position: center; } .justbfitness-service-item .justbfitness-service-item__image img { display: block; width: 100%; height: auto; } .justbfitness-service-item .justbfitness-service-item__content { width: calc(50% + 20px); background: #17171B; } .justbfitness-service-item__content-inner { padding: 40px 40px 34px 40px; } /* --- Services Card --- */ .justbfitness-service-card-grid { margin: -30px -20px; display: flex; flex-wrap: wrap; } .justbfitness-service-card-grid .justbfitness-service-card { width: calc(50% - 40px); margin: 30px 20px; } .justbfitness-service-card__head { display: flex; justify-content: space-between; position: relative; z-index: 3; } .justbfitness-service-card__head img { width: 155px; border-radius: 50%; box-shadow: 2px 3px 15px rgba(0,0,0,0.3); } .justbfitness-service-card__label { text-align: right; } .justbfitness-service-card .justbfitness-service-card__label h4 { margin: 27px 0 0 0; } .justbfitness-service-card__content { background: #17171B; margin: -40px 0 0 30px; padding: 66px 29px 28px 29px; } .justbfitness-service-card__content p { margin-bottom: 15px; } /* --- Testimonials Grid --- */ .justbfitness-testimonials-grid { margin: -30px -20px; display: flex; flex-wrap: wrap; } .justbfitness-testimonials-grid .justbfitness-testimonials-item { width: calc(33.33% - 40px); margin: 30px 20px; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__author { display: flex; justify-content: space-between; position: relative; z-index: 3; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__author img { width: 100px; border-radius: 50%; box-shadow: 2px 3px 15px rgba(0,0,0,0.3); } .justbfitness-testimonials-grid .justbfitness-testimonials-item__author--name { text-align: right; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__author--name h6 { margin: 12px 0 0 0; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__content { background: #17171B; margin: -30px 0 0 20px; padding: 10px 20px 18px 20px; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars { text-align: right; margin: 0 0 2px 0; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars:before { font-family: "LineAwesome"; color: #5C5C60; font-size: 16px; line-height: 20px; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars.justbfitness-stars0:before { content: '\f31b\f31b\f31b\f31b\f31b'; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars.justbfitness-stars1:before { content: '\f318\f31b\f31b\f31b\f31b'; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars.justbfitness-stars2:before { content: '\f318\f318\f31b\f31b\f31b'; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars.justbfitness-stars3:before { content: '\f318\f318\f318\f31b\f31b'; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars.justbfitness-stars4:before { content: '\f318\f318\f318\f318\f31b'; } .justbfitness-testimonials-grid .justbfitness-testimonials-item__stars.justbfitness-stars5:before { content: '\f318\f318\f318\f318\f318'; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item { text-align: center; margin: 20px; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__author { display: inline-block; margin: 0 auto 20px auto; min-height: 50px; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__author--image { position: absolute; left: 0; top: 0; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__author--image img { width: 50px; box-shadow: none; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__author--name { padding: 7px 0 0 25px; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__author--name h6 { margin: 0; position: relative; z-index: 5; text-shadow: 0 0 10px rgba(0,0,0,0.2); } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__stars { display: none; } .justbfitness-testimonials-grid.justbfitness-testimonials-grid--small .justbfitness-testimonials-item__content { text-align: left; margin: 0; padding: 30px 40px 30px 40px; } /* --- Testimonials Carousel --- */ .justbfitness-testimonials-carousel .justbfitness-testimonials-item { cursor: grab; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__content { font-size: 20px; line-height: 35px; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__content p:first-child:before, .justbfitness-testimonials-carousel .justbfitness-testimonials-item__content p:last-child:after { display: inline; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__content p:first-child:before { content: '\201c'; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__content p:last-child:after { content: '\201d'; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__author { margin: 27px auto 0 auto; display: inline-flex; align-items: center; position: relative; padding: 0 0 0 25px; text-align: right; min-height: 50px; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__author .justbfitness-testimonials-item__author--image { position: absolute; left: 0; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 0; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__author .justbfitness-testimonials-item__author--image img { border-radius: 50%; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__author--name { position: relative; z-index: 3; } .justbfitness-testimonials-carousel .justbfitness-testimonials-item__author h6 { margin: 0; text-shadow: 0 0 10px rgba(0,0,0,0.25); } .justbfitness-testimonials-nav span { } .justbfitness-testimonials-carousel .tns-nav { text-align: center; margin: 0 auto; padding: 30px 0 0 0; } .justbfitness-testimonials-carousel .tns-nav button { width: 10px; height: 10px; background: #ffffff; transition: opacity 0.3s, transform 0.3s; opacity: 0.25; transform: scale(1); border: none; border-radius: 50%; padding: 0; margin: 0 10px; } .justbfitness-testimonials-carousel .tns-nav button.tns-nav-active { opacity: 0.75; transform: scale(1.2); } /* --- Maintenance Page --- */ .justbfitness-mobile-header a.justbfitness-contacts-toggler, .justbfitness-contacts-close { display: none; } .justbfitness-maintenance-background { opacity: 0.13; } #justbfitness-contacts-wrap { opacity: 0; transform: translateY(100px); pointer-events: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; } .in-message-mode #justbfitness-contacts-wrap { pointer-events: auto; } .in-message-mode main.justbfitness-content-wrap { pointer-events: none; } #justbfitness-contacts-wrap .justbfitness-content { padding: 0; display: flex; justify-content: center; flex-direction: column; } #justbfitness-coming-soon { display: flex; } #justbfitness-coming-soon > div { width: 25%; text-align: center; } #justbfitness-coming-soon h2 { font-size: 80px; line-height: 85px; margin: 0 0 0 0; } #justbfitness-coming-soon span { display: block; color: #5C5C60; text-transform: uppercase; margin: -4px 0 0 0; font-weight: 700; } .is-message-close { display: none; } /* --- JustBFitness Kenburns --- */ .justbfitness-kenburns-slider { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .justbfitness-kenburns-slider > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center; background-size: cover; opacity: 0; } .justbfitness-kenburns-slider > div.is-active { opacity: 1; } /* --- Counter Item --- */ .justbfitness-counter-item { text-align: center; padding-top: 10px; } .justbfitness-counter-item span { display: block; } .justbfitness-counter-label { margin-bottom: 0; } .justbfitness-counter-value { font-size: 100px; line-height: 100px; margin-bottom: -14px; } /* --- JustBFitness Before After --- */ .justbfitness-before-after { position: relative; overflow: hidden; cursor: grab; } .justbfitness-before-after img { display: block; width: 100%; height: auto; opacity: 0; } .justbfitness-before-after div.justbfitness-before-after-img { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: no-repeat 0 0; background-size: cover; } .justbfitness-before-after div.justbfitness-after-img { width: 50%; } .justbfitness-before-after-divider { display: block; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: #000000; pointer-events: none; } .justbfitness-before-after-divider:before { content: ''; display: block; width: 50px; height: 50px; background: #000000; transform: rotate(45deg); margin: -25px 0 0 -25px; position: absolute; left: 50%; top: 50%; z-index: 3; } .justbfitness-before-after-divider i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; font-size: 24px; line-height: 30px; text-align: center; display: block; margin: -15px 0 0 -15px; color: #ffffff; z-index: 5; } /* --- Circle Progress Bar --- */ .justbfitness-progress-item { text-align: center; padding-top: 20px; } .justbfitness-progress-item-wrap { position: relative; display: block; padding: 0 60px; stroke-width: 5px; } .justbfitness-progress-item-wrap svg { display: block; margin: 0 auto; } .justbfitness-progress-item-wrap svg circle:first-child { stroke: #313133; stroke-width: 5px; } .justbfitness-progress-item-wrap svg circle:last-child { stroke: #FFF; transition: stroke-dashoffset 2s ease-in-out; stroke-width: 5px; stroke-linecap: round; } .justbfitness-progress-label { margin: 15px 0 0 0; } .justbfitness-progress-counter { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transform: translateX(5px); }