/* TemplateMo 548 Training Studio https://templatemo.com/tm-548-training-studio */ /* --------------------------------------------- Table of contents ------------------------------------------------ 01. font & reset css 02. reset 03. global styles 04. header 05. banner 06. features 07. testimonials 08. contact 09. footer 10. preloader 11. search 12. portfolio --------------------------------------------- */ /* --------------------------------------------- font & reset css --------------------------------------------- */ /* Google Fonts loaded via in — @import removed to eliminate duplicate request */ /* --------------------------------------------- reset --------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, figure, header, nav, section, article, aside, footer, figcaption { margin: 0; padding: 0; border: 0; outline: 0; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } ul, li { padding: 0; margin: 0; list-style: none; } header, nav, section, article, aside, footer, hgroup { display: block; } * { box-sizing: border-box; } html, body { font-family: 'Poppins', sans-serif; font-weight: 400; background-color: #fff; font-size: 16px; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none !important; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; font-family: 'Lora', Georgia, serif; text-transform: capitalize; } ul { margin-bottom: 0px; } p { font-size: 14px; line-height: 25px; color: #7a7a7a; } /* --------------------------------------------- global styles --------------------------------------------- */ :root { --red: #c0392b; --red-hover: #a93226; --red-shadow: rgba(192,57,43,0.35); --dark: #232d39; --charcoal: #1d2124; --text: #3d3d3d; --muted: #666; --bg-warm: #fdf9f6; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 8px 24px rgba(0,0,0,0.11); } html, body { background: #fff; font-family: 'Poppins', sans-serif; } ::selection { background: var(--red); color: #fff; } ::-moz-selection { background: var(--red); color: #fff; } @media (max-width: 991px) { html, body { overflow-x: hidden; } .mobile-top-fix { margin-top: 30px; margin-bottom: 0px; } .mobile-bottom-fix { margin-bottom: 30px; } .mobile-bottom-fix-big { margin-bottom: 60px; } } .section-heading { text-align: center; margin-top: 140px; margin-bottom: 80px; } .section-heading h2 { font-size: 28px; font-weight: 800; color: #232d39; text-transform: capitalize; letter-spacing: 0.5px; margin-top: 0px; margin-bottom: 0px; } .section-heading h2 em { font-style: normal; color: var(--red); } .section-heading img { margin: 20px auto; } .dark-bg h2 { color: #fff; } .dark-bg p { color: #fff; } .main-button a { display: inline-block; font-size: 15px; padding: 12px 20px; background-color: var(--red); color: #fff; text-align: center; font-weight: 400; text-transform: uppercase; transition: all .3s; } .main-button a:hover { background-color: var(--red-hover); } /* --------------------------------------------- header --------------------------------------------- */ .background-header { background: rgba(250,250,250,0.99) !important; height: 80px!important; position: fixed!important; top: 0px; left: 0px; right: 0px; box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important; } .background-header .logo, .background-header .main-nav .nav li a { color: #232d39!important; } .background-header .main-nav .nav li:last-child a { color: #fff !important; } .background-header .main-nav .nav li:last-child a:hover { color: #fff!important; } .background-header .main-nav .nav li:hover a { color: var(--red)!important; } .background-header .nav li a.active { color: var(--red)!important; } .header-area { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 100; height: 80px; background: rgba(250,250,250,0.1); -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s; } .header-area .main-nav { min-height: 80px; background: transparent; } .header-area .main-nav .logo { line-height: 80px; color: #fff; font-family: 'Lora', Georgia, serif; font-size: clamp(20px, 5vw, 32px); font-weight: 700; float: left; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .header-area .main-nav .logo em { font-style: normal; color: var(--red); font-weight: 900; } .header-area .main-nav .nav { float: right; margin-top: 27px; margin-right: 0px; background-color: transparent; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; z-index: 999; } .header-area .main-nav .nav li { padding-left: 12px; padding-right: 12px; } .header-area .main-nav .nav li a { display: block; font-weight: 500; font-size: 13px; color: #7a7a7a; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; height: 40px; line-height: 40px; border: transparent; letter-spacing: 1px; } .header-area .main-nav .nav li a { color: #fff; } .header-area .main-nav .nav li:last-child a { display: inline-block; font-size: 13px; padding: 11px 17px; background-color: var(--red); color: #fff; text-align: center; font-weight: 400; letter-spacing: 0px; text-transform: uppercase; transition: all .3s; height: auto; line-height: 20px; } .header-area .main-nav .nav li:last-child a:hover { background-color: var(--red-hover); opacity: 1; } .header-area .main-nav .nav li:hover a, .header-area .main-nav .nav li a.active { color: var(--red)!important; opacity: 1; } .background-header .main-nav .nav li:hover a, .background-header .main-nav .nav li a.active { color: var(--red)!important; opacity: 1; } .header-area .main-nav .menu-trigger { cursor: pointer; display: block; position: absolute; top: 23px; width: 32px; height: 40px; text-indent: -9999em; z-index: 99; right: 40px; display: none; } .header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: #1e1e1e; display: block; position: absolute; width: 30px; height: 2px; left: 0; } .background-header .main-nav .menu-trigger span, .background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after { background-color: #1e1e1e; } .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: #1e1e1e; display: block; position: absolute; width: 30px; height: 2px; left: 0; width: 75%; } .background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after { background-color: #1e1e1e; } .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { content: ""; } .header-area .main-nav .menu-trigger span { top: 16px; } .header-area .main-nav .menu-trigger span:before { -moz-transform-origin: 33% 100%; -ms-transform-origin: 33% 100%; -webkit-transform-origin: 33% 100%; transform-origin: 33% 100%; top: -10px; z-index: 10; } .header-area .main-nav .menu-trigger span:after { -moz-transform-origin: 33% 0; -ms-transform-origin: 33% 0; -webkit-transform-origin: 33% 0; transform-origin: 33% 0; top: 10px; } .header-area .main-nav .menu-trigger.active span, .header-area .main-nav .menu-trigger.active span:before, .header-area .main-nav .menu-trigger.active span:after { background-color: transparent; width: 100%; } .header-area .main-nav .menu-trigger.active span:before { -moz-transform: translateY(6px) translateX(1px) rotate(45deg); -ms-transform: translateY(6px) translateX(1px) rotate(45deg); -webkit-transform: translateY(6px) translateX(1px) rotate(45deg); transform: translateY(6px) translateX(1px) rotate(45deg); background-color: #1e1e1e; } .background-header .main-nav .menu-trigger.active span:before { background-color: #1e1e1e; } .header-area .main-nav .menu-trigger.active span:after { -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg); -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg); -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg); transform: translateY(-6px) translateX(1px) rotate(-45deg); background-color: #1e1e1e; } .background-header .main-nav .menu-trigger.active span:after { background-color: #1e1e1e; } .header-area.header-sticky { min-height: 80px; } .header-area.header-sticky .nav { margin-top: 20px !important; } .header-area.header-sticky .nav li a.active { color: var(--red); } @media (max-width: 1200px) { .header-area .main-nav:before { display: none; } } @media (max-width: 1199px) { .section-heading { margin-top: 0 !important; } .header-area .main-nav .logo, .header-area.background-header .main-nav .logo, .background-header .logo { color: #fff !important; line-height: 48px !important; } .header-area.header-sticky .nav li a:hover, .header-area.header-sticky .nav li a.active { color: var(--red)!important; opacity: 1; } .header-area, .header-area.background-header { background-color: rgba(0,0,0,0.88) !important; background: rgba(0,0,0,0.88) !important; box-shadow: none !important; padding: 0px 15px; height: 48px !important; min-height: 48px !important; line-height: 48px !important; text-align: center; } .header-area .container { padding: 0px; } .header-area .main-nav { min-height: 48px !important; } .header-area .logo { margin-left: 30px; } .header-area .main-nav .menu-trigger { display: block !important; width: 36px !important; height: 36px !important; top: 2px !important; right: 15px !important; border-radius: 50%; background: rgba(0, 0, 0, 0.3); } .header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { background-color: #fff !important; width: 20px !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; } .header-area .main-nav .menu-trigger span { top: 21px !important; } .header-area .main-nav .menu-trigger span:before { top: -7px !important; } .header-area .main-nav .menu-trigger span:after { top: 7px !important; } .header-area .main-nav .menu-trigger.active span:before, .header-area .main-nav .menu-trigger.active span:after { background-color: #fff !important; } /* Overlay backdrop — injected by JS */ #nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 90; } #nav-overlay.active { display: block; } /* Drawer panel */ .header-area .main-nav { overflow: visible; } .header-area .main-nav .nav { position: fixed !important; top: 0 !important; right: -100% !important; width: 80% !important; max-width: 300px !important; height: 60vh !important; background: #1d2124 !important; z-index: 999 !important; display: flex !important; flex-direction: column !important; padding-top: 70px !important; margin: 0 !important; transition: right 0.3s ease !important; box-shadow: -4px 0 20px rgba(0,0,0,0.3) !important; } .header-area .main-nav .nav.open { right: 0 !important; } /* Nav items inside drawer */ .header-area .main-nav .nav li { width: 100% !important; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 0 !important; } .header-area .main-nav .nav li a { display: block !important; padding: 0 28px !important; height: 56px !important; line-height: 56px !important; color: #fff !important; background: transparent !important; font-size: 1rem !important; font-weight: 500 !important; letter-spacing: 0.02em !important; border: none !important; } .header-area .main-nav .nav li a:hover, .header-area .main-nav .nav li a.active { background: rgba(255,255,255,0.07) !important; color: #ff6b6b !important; } /* Contact Us — red accent button */ .header-area .main-nav .nav li:last-child { background: transparent !important; margin: 20px 16px 0 !important; width: auto !important; border: none !important; } .header-area .main-nav .nav li:last-child a { background: #c0392b !important; border-radius: 6px !important; color: #fff !important; text-align: center !important; padding: 0 20px !important; } .header-area .main-nav .nav li:last-child a:hover { background: #e74c3c !important; color: #fff !important; } /* Close × button — injected by JS inside drawer */ #nav-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: #fff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } #nav-close:hover { background: rgba(255,255,255,0.2); } /* Prevent body scroll when drawer open */ body.nav-open { overflow: hidden; } } @media (min-width: 1200px) { .header-area .main-nav .nav { display: flex !important; } #nav-close, #nav-overlay { display: none !important; } } /* --------------------------------------------- banner --------------------------------------------- */ .main-banner { position: relative; } #bg-video { min-width: 100%; min-height: 100vh; max-width: 100%; max-height: 100vh; object-fit: cover; z-index: -1; } #bg-video::-webkit-media-controls { display: none !important; } .video-overlay { position: absolute; background-color: rgba(35,45,57,0.8); top: 0; left: 0; bottom: 7px; width: 100%; } .main-banner .caption { text-align: center; position: absolute; width: 80%; left: 50%; top: 35%; transform: translate(-50%,-50%); } .main-banner .caption h6 { margin-top: 0px; font-size: 18px; text-transform: capitalize; font-weight: 800; color: #fff; letter-spacing: 0.5px; } .main-banner .caption h2 { margin-top: 30px; margin-bottom: 25px; font-size: 84px; text-transform: capitalize; font-weight: 800; color: #fff; letter-spacing: 1px; } .main-banner .caption h2 em { font-style: normal; color: var(--red); font-weight: 900; } /* --------------------------------------------- features --------------------------------------------- */ #features { margin-bottom: 80px; } .feature-item { display: inline-block; margin-bottom: 60px; } .feature-item .left-icon img { float: left; margin-right: 30px; border-radius: 8px; object-fit: cover; width: 100px; height: 100px; } .feature-item .right-content { display: inline; } .feature-item .right-content h4 { margin-top: 0px; margin-bottom: 7px; letter-spacing: 0.25px; color: #232d39; font-size: 19px; font-weight: 600; text-transform: capitalize; } .feature-item .right-content a.text-button { margin-top: 7px; display: inline-block; font-size: 13px; text-transform: uppercase; color: var(--red); font-weight: 500; } /* --------------------------------------------- subscribe --------------------------------------------- */ #call-to-action { padding: 120px 0px; background-image: url(../images/cta-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center; } .cta-content h2 { font-size: 36px; text-transform: capitalize; font-weight: 800; color: #fff; letter-spacing: 1px; } .cta-content h2 em { font-style: normal; color: var(--red); } .cta-content p { font-size: 16px; color: #fff; margin: 15px 0px 25px 0px; } /* -------------------------------------------- Our Classes -------------------------------------------- */ #our-classes { margin-bottom: 140px; } #tabs ul { margin: 0; padding: 0; } #tabs ul li { margin-bottom: 30px; display: inline-block; width: 100%; } #tabs ul li:last-child { margin-bottom: 0px; } #tabs ul li a { text-transform: capitalize; width: 100%; padding: 30px 30px; display: inline-block; background-color: #fff; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); font-size: 19px; color: #232d39; letter-spacing: 0.5px; font-weight: 600; transition: all 0.3s; } #tabs .main-rounded-button a { text-align: center; padding: 20px 30px; width: 100%; border-radius: 5px; display: inline-block; box-shadow: 0px 0px 15px rgba(0,0,0,0.1); color: #fff; font-size: 19px; letter-spacing: 0.5px; font-weight: 600; background-color: var(--red); } #tabs .main-rounded-button a:hover { background-color: var(--red-hover); } #tabs ul li a img { max-width: 100%; margin-right: 20px; } #tabs ul .ui-tabs-active span { background: #faf5b2; border: #faf5b2; line-height: 90px; border-bottom: none; } #tabs ul .ui-tabs-active a { color: var(--red); } #tabs ul .ui-tabs-active span { color: #1e1e1e; } .tabs-content { margin-left: 30px; text-align: left; display: inline-block; transition: all 0.3s; } .tabs-content img { max-width: 100%; overflow: hidden; border-radius: 5px; } .tabs-content h4 { font-size: 23px; font-weight: 700; color: #232d39; letter-spacing: 0.5px; margin-bottom: 20px; margin-top: 30px; } .tabs-content p { font-size: 14px; color: #7a7a7a; margin-bottom: 28px; } /* --------------------------------------------- schedule --------------------------------------------- */ #schedule { padding: 0px 0px 140px 0px; background-image: url(../images/schedule-bg.html); background-position: center center; background-repeat: no-repeat; background-size: cover; } #schedule table { width: 100%; text-align: center; border: 1px solid #fff; } #schedule table tbody { border-top: 1px solid #fff; } #schedule table tbody tr { border-bottom: 1px solid #fff; } #schedule table tbody tr td { border-right: 1px solid #fff; height: 100px; } #schedule table tr td { color: #fff; font-size: 13px; text-transform: capitalize; font-weight: 500; letter-spacing: 0.25px; } .schedule-table.filtering .ts-item { opacity: 0; transition: all 0.5s; } .schedule-table.filtering .ts-item.show { opacity: 1; transition: all 0.5s; } #schedule .filters { margin-bottom: 40px; } #schedule .filters ul { padding: 0; text-align: center; } #schedule .filters ul li { list-style: none; display: inline; cursor: pointer; position: relative; margin-right: 10px; font-size: 15px; font-weight: 500; color: #fff; text-transform: capitalize; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #schedule .filters ul li:after { content: "/"; margin-left: 10px; color: #fff; } #schedule .filters ul li:last-child { margin-right: 0px; } #schedule .filters ul li:last-child::after { display: none; } #schedule .filters ul li.active, #schedule .filters ul li:hover { color: var(--red); } #schedule .filters-content { margin-top: 50px; } #schedule .filters-content .show { opacity: 1; visibility: visible; transition: all 350ms; } #schedule .filters-content .hide { opacity: 0; visibility: hidden; transition: all 350ms; } /* --------------------------------------------- trainers --------------------------------------------- */ #trainers .trainer-item { background-color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 40px; transition: box-shadow 0.25s ease, transform 0.25s ease; } #trainers .trainer-item:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } #trainers .trainer-item img { width: 100%; border-radius: 5px; } #trainers .trainer-item span { font-size: 13px; font-weight: 500; color: var(--red); display: inline-block; margin-top: 25px; margin-bottom: 10px; } #trainers .trainer-item h4 { font-size: 19px; font-weight: 600; color: #232d39; letter-spacing: 0.5px; margin-bottom: 18px; } #trainers .trainer-item p { margin-bottom: 20px; } #trainers .trainer-item ul.social-icons li { display: inline-block; margin-right: 12px; } #trainers .trainer-item ul.social-icons li:last-child { margin-right: 0px; } #trainers .trainer-item ul.social-icons li a { color: #232d39; transition: all .3s; } #trainers .trainer-item ul.social-icons li a:hover { color: var(--red); } /* --------------------------------------------- contact --------------------------------------------- */ #contact-us { margin-top: 140px; } #contact-us .container-fluid .col-lg-6 { padding: 0px; } #contact-us .contact-form { padding: 80px; background-image: url(../images/contact-bg.html); background-position: center center; background-repeat: no-repeat; background-size: cover; } #contact-us .contact-form #contact { background-color: #fff; padding: 40px; border-radius: 5px; } .contact-form input, .contact-form textarea { color: #7a7a7a; font-size: 13px; border: 1px solid #ddd; background-color: #fff; width: 100%; height: 40px; outline: none; line-height: 40px; padding: 0px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom: 30px; } .contact-form textarea { height: 150px; resize: none; } .contact-form ::-webkit-input-placeholder { /* Edge */ color: #7a7a7a; } .contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #7a7a7a; } .contact-form ::placeholder { color: #7a7a7a; } .contact-form button { display: inline-block; font-size: 13px; padding: 11px 17px; background-color: var(--red); color: #fff; text-align: center; font-weight: 400; text-transform: uppercase; transition: all .3s; border: none; outline: none; margin-top: -8px; } .contact-form button:hover { background-color: var(--red-hover); } /* --------------------------------------------- footer --------------------------------------------- */ footer { background-color: #232d39; text-align: left; padding: 0; } .footer-main { padding: 50px 0 40px; } .footer-brand { font-family: 'Poppins', sans-serif; font-size: 1.35rem; font-weight: 800; color: #fff; margin-bottom: 0.6rem; letter-spacing: -0.01em; } .footer-bio { color: #9aaab8; font-size: 0.91rem; line-height: 1.65; margin-bottom: 1.25rem; max-width: 300px; } .footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; } .footer-social-link { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4rem 0.9rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; color: #fff !important; text-decoration: none !important; transition: opacity 0.2s ease; } .footer-social-link:hover { opacity: 0.8; } .footer-social-fb { background: #1877f2; } .footer-social-yt { background: #ff0000; } .footer-heading { font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #dc3545; margin-bottom: 0.85rem; } .footer-links { list-style: none; padding: 0; margin: 0 0 0.5rem; } .footer-links li { margin-bottom: 0.45rem; } .footer-links a { color: #9aaab8; font-size: 0.91rem; text-decoration: none; transition: color 0.18s ease; } .footer-links a:hover { color: #fff; text-decoration: none; } .footer-see-all { font-weight: 600; color: #c0cdd8 !important; } .footer-events-text { color: #9aaab8; font-size: 0.91rem; line-height: 1.6; margin-bottom: 1rem; } .footer-about-link { margin-top: 0.6rem; margin-bottom: 0; } .footer-about-link a { color: #9aaab8; font-size: 0.875rem; text-decoration: none; transition: color 0.18s ease; } .footer-about-link a:hover { color: #fff; } .footer-strip { background-color: #1a2028; border-top: 1px solid rgba(255,255,255,0.06); padding: 13px 0; text-align: center; } .footer-strip p { color: #5a6b7a; font-size: 0.8rem; margin: 0; } /* --------------------------------------------- preloader --------------------------------------------- */ .js-preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #232d39; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; opacity: 1; visibility: visible; z-index: 9999; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .js-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } @-webkit-keyframes dot { 50% { -webkit-transform: translateX(96px); transform: translateX(96px); } } @keyframes dot { 50% { -webkit-transform: translateX(96px); transform: translateX(96px); } } @-webkit-keyframes dots { 50% { -webkit-transform: translateX(-31px); transform: translateX(-31px); } } @keyframes dots { 50% { -webkit-transform: translateX(-31px); transform: translateX(-31px); } } .preloader-inner { position: relative; width: 142px; height: 40px; background: #232d39; } .preloader-inner .dot { position: absolute; width: 16px; height: 16px; top: 12px; left: 15px; background: #fff; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation: dot 2.8s infinite; animation: dot 2.8s infinite; } .preloader-inner .dots { -webkit-transform: translateX(0); transform: translateX(0); margin-top: 12px; margin-left: 31px; -webkit-animation: dots 2.8s infinite; animation: dots 2.8s infinite; } .preloader-inner .dots span { display: block; float: left; width: 16px; height: 16px; margin-left: 16px; background: #fff; border-radius: 50%; } /* --------------------------------------------- responsive --------------------------------------------- */ @media (max-width: 992px) { .main-banner .caption h2 { font-size: 64px; } #features { margin-bottom: 110px; } #features .feature-item { margin-bottom: 30px; } #our-classes .tabs-content { margin-left: 0px; margin-top: 30px; } .trainer-item { margin-bottom: 30px; } #contact-us #map { margin-bottom: -7px; } #contact-us .contact-form { padding: 30px; } #contact-us .contact-form #contact { padding: 30px; } } @media (max-width: 450px) { .feature-item .right-content a.text-button { margin-left: 130px; } } .gallery-img { width: 100%; height: auto; border-radius: 15px !important; /* <-- forces rounded corners */ overflow: hidden; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } /* Article image centering */ .article-content figure, .article-content .wp-block-image { text-align: center; margin: 1rem auto; } .article-content figure img { display: block; margin: 0 auto; } .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; } .alignright { display: block; margin-left: auto; margin-right: auto; text-align: center; } .wp-element-caption { text-align: center; font-size: 0.9rem; color: #666; margin-top: 0.4rem; } p a, li a, td a, blockquote a, figcaption a { font-weight: 700; text-decoration: underline !important; } .main-nav a, .main-nav li a { text-decoration: none !important; font-weight: inherit; } .subscribe-jiggle { animation: subscribeWiggle 2.5s ease-in-out infinite; } @keyframes subscribeWiggle { 0%,100% { transform: rotate(0deg); } 15% { transform: rotate(-4deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(3deg); } 75% { transform: rotate(-1deg); } }