/**
section > div.block > inside content
footer > div.block > inside content
*/

a.theme-btn {
    display: inline-block; /* Keep it as an inline block */
    padding: 10px 30px 10px 30px; /* Reduced padding for a slimmer button */
	height: auto;
    margin: 0 2px 0.5rem 2px;
    text-align: center; /* Center text */
    text-decoration: none;
    border-radius: 3px; /* Smooth rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; /* Smooth transitions */
    position: relative;
    overflow: hidden; /* Ensures pseudo-elements stay within button */
	background-image: linear-gradient(to right, #DAFF45 , #DAFF45 );
    color: #000;
    font-size: 0.75rem; /* Maintain readable text size */
    text-transform: uppercase;
    letter-spacing: 0.25px; /* Slight spacing for a modern touch */	
	font-family: 'Reakt';
	font-weight: 700;
	border: 1px solid #DAFF45;
	line-height: 1;
	min-width: 60px;
    vertical-align: middle; /* Align with adjacent inline elements */
}

a.theme-btn.outline {
	background: transparent;
	border: 1px solid #DAFF45;
	border: 1px solid white;
	color: #DAFF45;
	color: white;
}

a.theme-btn svg {
    display: inline-block; /* Ensure SVG is inline */
    fill: #DAFF45;
	fill: black;
    margin-left: 6px; /* Space between text and SVG */
    vertical-align: middle; /* Align with text */
    height: 1.2em; /* Match the height to text for better alignment */
    width: auto; /* Maintain aspect ratio */
    position: relative; /* Allow for adjustment if needed */
    top: 0; /* Fine-tune vertical alignment */
	display: none;
}



/* ------------------------------------------------------------------- 
 * ## section (general)
 * ------------------------------------------------------------------- */
 
 .reaktor-font {
	font-size: 85%;
 }

/* ------------------------------------------------------------------- 
 * ## section (general)
 * ------------------------------------------------------------------- */

section {
	position: relative;
    width: 100%;
    height: auto;
    min-height: 100px;	
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: center;
    background: transparent;
	/* Set max width on content only */
	padding: 15% calc((100% - 1000px)/2);
	margin: 0 auto;
	overflow: hidden;
	border-top: 2px solid #151515;
}

section:nth-of-type(1) {
    /*background-image: linear-gradient(
            to top,
            rgba(10, 10, 10, 1),
            rgba(10, 10, 10, 0.75)
        ),
        url("images/bb-squat-cover-digital.jpg");*/
    background-image: url("images/hero-bg-1.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}

section:nth-of-type(2) {
    background: #0C0C0C;
}

section:nth-of-type(4) {
    background: #0C0C0C;
}

section:nth-of-type(0) {
	background: #242424;
    background-image: linear-gradient(
            to top,
            rgba(10, 10, 10, 0.85),
            rgba(10, 10, 10, 0.85)
        ),
        url("images/home-gym-basement.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;	
}

section:nth-of-type(0) {
	background: #0C0C0C;
    background-image: linear-gradient(135deg, #0C0C0C, #0C0C0C, #0C0C0C);
}

section:nth-of-type(5) {
	background: #0C0C0C;
    background-image: linear-gradient(135deg, #0C0C0C, #0C0C0C, #0C0C0C);
}

section:nth-of-type(8) {
    background: #181818;
    background-image: linear-gradient(
            to top,
            rgba(10, 10, 10, .90),
            rgba(10, 10, 10, .90)
        ),
        url("images/home-gym.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;		
}

/* ------------------------------------------------------------------- 
 * ## section > blocks
 * ------------------------------------------------------------------- */

section .block,
footer .block {
	position: relative;
	display: block;
	padding: 0 5%;
	width: 100%;
	height: auto;
	overflow: hidden;
}

section .block:first-of-type h1 {
	text-align: center;
}

section .block:first-of-type h1 {
    line-height: 1;
}

section .block:first-of-type h1:after {
    content: '';  /* No need for '-' content since we're using a background gradient */
    display: none;  /* Makes the pseudo-element block-level */
    width: 170px;  /* Length of the dash (can adjust this) */
    height: 2px;  /* Thickness of the dash */
    margin: .8rem auto;  /* Centers the dash horizontally */
    
    /* Background gradient to create the fade effect */
    background: linear-gradient(to right, transparent 0%, #DAFF45 30%, #DAFF45 70%, transparent 100%);
}

section hr {
    width: 60%;
    margin: 0 auto;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #333;
    margin: 4rem 0 3rem 0;
}

@media (max-width: 767px) {

}

/* ------------------------------------------------------------------- 
 * ## animations
 * ------------------------------------------------------------------- */

.fade-on-scroll {
    opacity: 0;
}
@keyframes fadeInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.fade-in-up {
    animation: 0.75s both fadeInUp;
}

/* ------------------------------------------------------------------- 
 * ## hero section
 * ------------------------------------------------------------------- */

section.hero {
	position: relative;
    flex-flow: row nowrap;
	width: 100%;
    height: 580px;
}

section.hero .block {
	display: block;
	position: relative;
	width: 100%;

}

section.hero .block:first-of-type strong {
	font-weight: 700;
	text-transform: uppercase;
	font-size: .750rem;
	letter-spacing: 1px;
	color: #DAFF45;
	background: transparent;
	color: white;
	width: auto;
	margin: 0 auto 0rem auto;
	display: inline-block;
	position: relative;
	border-radius: 1px;
	border-left: 0px solid white;
	border-right: 0px solid white;
}

section.hero .block:first-of-type h1 {
	text-align: left;
	margin-top: .75rem;
	margin-bottom: 0rem;
	font-size: 4.5rem;
	display: flex;
	justify-content: start;
	line-height: .75;
}

section.hero .block:first-of-type p {
	text-align: left;
	margin-bottom: 1rem;
	margin-top: 0rem;
	max-width: 500px;
}

section.hero .block:nth-of-type(1) {
	flex: 0 0 55%;
    text-align: left;
	margin-top: 0px; /* Added */
}

section.hero .block:nth-of-type(1) a.hero-btn {
    display: inline-flex; /* Keep it as an inline block */
	position: relative;
    padding: 10px 30px 10px 30px; /* Reduced padding for a slimmer button */
	height: auto;
    margin: .5rem 2px 0.5rem 2px;
    text-align: center; /* Center text */
    text-decoration: none;
    border-radius: 2px; /* Smooth rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
    overflow: hidden; /* Ensures pseudo-elements stay within button */
	background-image: linear-gradient(to right, #DAFF45 , #DAFF45);
    color: #000;
    font-size: 0.75rem; /* Maintain readable text size */
    text-transform: uppercase;
    letter-spacing: 0.25px; /* Slight spacing for a modern touch */	
	font-family: 'Reakt';
	font-weight: 700;
	border: 1px solid white;
	line-height: 1;
	min-width: 60px;
    vertical-align: middle; /* Align with adjacent inline elements */
}

section.hero .block:nth-of-type(1) a.hero-btn:hover svg {
  transform: translateX(5px); /* Moves it 5px to the right */
  transition: transform 0.3s ease; /* Smooth animation */
}

section.hero .block:nth-of-type(1) a.hero-btn.outline {
	background: #DAFF45;
	border: 1px solid white;
	color: white;
	
	color: black;
	border: 1px solid #DAFF45;
}

section.hero .block:nth-of-type(1) a.hero-btn.underline {
	background: transparent;
	border: 0px solid #DAFF45;
	color: #777;
	text-decoration: underline;
	text-transform: normal;
}


section.hero .block:nth-of-type(1) a.hero-btn svg {
    display: inline-block; /* Ensure SVG is inline */
    fill: #DAFF45;
	fill: black;
    margin-left: 12px; /* Space between text and SVG */
    vertical-align: middle; /* Align with text */
    height: 12px; /* Match the height to text for better alignment */
    width: 12px; /* Maintain aspect ratio */
    position: relative; /* Allow for adjustment if needed */
    top: 0; /* Fine-tune vertical alignment */
	transition: transform 0.3s ease;
}


section.hero .block:nth-of-type(2) {
    display: flex;
	flex: 0 0 45%;
    justify-content: center;
    align-content: center;
}

section.hero .block:nth-of-type(2) img {
	min-width: 350px;
}

section.hero .home-content__social {
    list-style: none;
    margin: 0;
    font-size: 10px;
    line-height: 2.0rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    position: absolute;
    right: calc(20px + (2.4rem / 2));
    top: 50%;
    -webkit-transform: rotate(-90deg) translate3d(50%, 0, 0);
    -ms-transform: rotate(-90deg) translate3d(50%, 0, 0);
    transform: rotate(-90deg) translate3d(50%, 0, 0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
	background-color: rgba(0, 0, 0, .35);
	border-radius: 20px;
	padding: 0 1rem;
}

.hero .home-content__social li {
    display: inline;
    margin-right: 0px;
}

.hero .home-content__social li a {
    color: #777;
}

.hero .home-content__social li:hover a {
    color: white;
}

@media (min-width: 991px) {
	section.hero {
		background-attachment: fixed;
	}
}

@media (max-width: 767px) {
	
    section.hero {
        flex-flow: row wrap;
		background-attachment: scroll;
    }
	
	section.hero .block:first-of-type strong {
		font-size: 1.0rem;
		letter-spacing: 1px;
		display: none;
	}
	
	section.hero .block:first-of-type h1 {
		text-align: left;
		margin-top: 0.25rem;
		margin-bottom: 0.2rem;
		font-size: 3.8rem;
		line-height: 1;
		letter-spacing: .5px;
		
		display:none;
	}
	
	section.hero .block:first-of-type p {
		text-align: left;
		font-size: 1.5rem;
	}
	
	section.hero .block:first-of-type a {
		margin-top: 10px;
		/**/
	}
	
    section.hero .block:nth-of-type(1) {
        flex: 1 0 100%;
        text-align: left;

    }
	
    section.hero .block:nth-of-type(2) {
        flex: 1 0 100%;
    }
	
    .hero .home-content__social {
        display: none;
    }
	
}

/* ------------------------------------------------------------------- 
 * ## differently section
 * ------------------------------------------------------------------- */
.swiper.swiper-cards {
    width: 100%;
    height: 400px; /* Set a fixed height for the swiper */
    padding: 0 0 50px 0;
    margin: 20px 0 10px 0;
}

.swiper.swiper-cards .swiper-slide {
    display: flex;
    flex-direction: column; /* Arrange contents vertically */
    justify-content: center; /* Center contents vertically */
    align-items: center; /* Center contents horizontally */
    height: 100%; /* Make sure the slide takes full height */
    border-radius: 8px;
    overflow: hidden;
    background: #101010;
	background: #101010;
    border: 1px solid #161616;
    position: relative; /* For positioning of background */
    background-size: cover; /* Ensure background covers the slide */
    background-position: center; /* Center the background */
}

/* Define background images with the same aspect ratio */
.swiper.swiper-cards#swiper-reaktor .swiper-slide:nth-of-type(1) {
    background-image: url("images/carousel/swiper-1.png");
}
.swiper.swiper-cards#swiper-reaktor .swiper-slide:nth-of-type(2) {
    background-image: url("images/carousel/swiper-2.png");
}
.swiper.swiper-cards#swiper-reaktor .swiper-slide:nth-of-type(3) {
    background-image: url("images/carousel/swiper-3.png");
}
.swiper.swiper-cards#swiper-reaktor .swiper-slide:nth-of-type(4) {
    background-image: url("images/carousel/swiper-4.png");
}
.swiper#swiper-reaktor .swiper-slide:nth-of-type(5) {
    background-image: url("images/carousel/swiper-5.png");
}

/* Define background images with the same aspect ratio */
.swiper.swiper-cards#swiper-reviews .swiper-slide:nth-of-type(1) {

}
.swiper.swiper-cards#swiper-reviews .swiper-slide:nth-of-type(2) {
	
}
.swiper.swiper-cards#swiper-reviews.swiper-slide:nth-of-type(3) {

}
.swiper.swiper-cards#swiper-reviews .swiper-slide:nth-of-type(4) {

}
.swiper.swiper-cards#swiper-reviews .swiper-slide:nth-of-type(5) {

}

.swiper.swiper-cards .swiper-slide .content {
    display: block;
    position: absolute;
    top: 2rem;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0); /* Use a semi-transparent background */
    padding: 5px;
    backdrop-filter: blur(0px); /* Adjust the blur radius as needed */
    border-radius: 8px; /* Optional: Add some rounding to the corners */
}


.swiper.swiper-cards .swiper-slide .content span.icon {
	position: relative;
    display: block;
	text-align: center;
	margin: 0 auto 4px auto;
}
.swiper.swiper-cards .swiper-slide .content span.icon svg {
    display: inline-block;
	fill: #DAFF45;
	fill: #DAFF45;
}

.swiper.swiper-cards .swiper-slide .content h2 {
    font-size: 1.5rem;
	line-height: 1.25;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    -webkit-user-select: none; /* Safari */
    user-select: none;
}
.swiper.swiper-cards .swiper-slide .content h3 {
	font-family: 'Reakt';
    font-size: .650rem;
    letter-spacing: .5px;
	color: #ccc;
    text-transform: uppercase;
    text-align: center;
    -webkit-user-select: none; /* Safari */
    user-select: none;
}
.swiper.swiper-cards .swiper-slide .content h2:after {
    content: "";
}

.swiper.swiper-cards .swiper-slide .content p {
    -webkit-user-select: none; /* Safari */
    user-select: none;
    text-align: left;
    line-height: 1.75rem;
    font-size: 1rem;
	
	display: none;
}

.swiper.swiper-cards .swiper-slide .content img {
    width: 100%; /* Ensure image covers the slide */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Crop the image if needed */
}

.swiper.swiper-cards .swiper-pagination {
    bottom: 0px !important;
}

.swiper.swiper-cards .swiper-pagination-bullet {
    background-color: white !important;
    height: 2px;
    width: 10px;
    bottom: -30px;
    margin-bottom: 5px !important;
    border-radius: 0px !important;
}

.swiper.swiper-cards .swiper-pagination-bullet-active {
    background-color: #DAFF45 !important;
}


.swiper.swiper-hero .swiper-slide:nth-of-type(1) {
    /*background-image: linear-gradient(
            to top,
            rgba(10, 10, 10, 1),
            rgba(10, 10, 10, 0.75)
        ),
        url("images/bb-squat-cover-digital.jpg");*/
    background-image: url("images/hero-bg-1.jpg");		
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}

.swiper.swiper-hero .swiper-slide:nth-of-type(2) {
    background-image: linear-gradient(
            to top,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, 0.85)
        ),
        url("images/index-landing-2.jpg");	
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}

.swiper.swiper-hero .swiper-slide:nth-of-type(3) {
    background-image: linear-gradient(
            to top,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, 0.85)
        ),
        url("images/training-landing-page.jpg");	
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
}

.swiper.swiper-hero .swiper-pagination {
    bottom: 30px !important;
}

.swiper.swiper-hero .swiper-pagination-bullet {
    background-color: white !important;
    height: 2px;
    width: 10px;
    bottom: -30px;
    margin-bottom: 5px !important;
    border-radius: 0px !important;
}

.swiper.swiper-hero .swiper-pagination-bullet-active {
    background-color: #DAFF45 !important;
}



/* ------------------------------------------------------------------- 
 * ## process section
 * ------------------------------------------------------------------- */

.process-wrap {
    margin-top: 1rem;
}

.process-wrap h2 {
    margin: 2rem 0 1rem 0;
    padding: 0 10px;
}

.process {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    counter-reset: ctr;
    padding-left: 25px;
	padding-left: 0;
}

.process .process__steps {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}

.process .step {
    padding: 0 40px 1.5rem 60px;
    position: relative;
    min-height: 240px;
    flex: 1 0 50%;
}

.process .step h2 {
	margin-bottom: .25rem;
	font-size: 1.35rem;
	color: white;
	line-height: 1.25;
	margin-bottom: .25rem;
}

.process .step::before {
    content: counter(ctr);
    counter-increment: ctr; /* numbers */
	content: counter(ctr, upper-alpha); /* letters */
    position: absolute;
    top: -1px;
    left: -5px;	
    display: flex;
	justify-content: center;
	align-items: center;
    font-family: "Reakt", sans-serif;
    font-size: 1rem;
	font-weight: 700;
    color: #DAFF45;
    height: 32px;
    width: 32px;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
	border: 1px solid #DAFF45;
	background: none;
	background: #DAFF45;
	background: white;
	border: none;
	color: black;	
    /* match bg */
    /*box-shadow: 0 0 0 15px rgb(18, 18, 18);*/
    z-index: 500;
	/*box-shadow: rgba(102, 252, 241, 0.5) 0 1px 5px;*/
	display: none;
}
.process .step::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -5px;	
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
	border: 1px solid #DAFF45;
    background-color: rgba(125, 249, 255, 0);
    /* match bg */
    box-shadow: 0 0 0 0px rgb(18, 18, 18);
    z-index: 500;
	display: none;
}

@media (max-width: 767px) {
    .process .process__steps {
        flex-flow: column wrap;
    }
}


/* ------------------------------------------------------------------- 
 * ## features section 
 * ------------------------------------------------------------------- */

figure.main {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    min-height: 420px;
    margin: 0 auto;
    background: transparent;
    margin-bottom: 5px;
    border-radius: 4px;
    width: 100%;
    padding: 0 0rem;
    border: 0px solid #777;
}

figure .button {
    background: transparent;
    border: 1px solid #DAFF45;
    color: white;
    padding: 5px 36px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    line-height: 1;
    margin-top: 1rem;
    max-width: 200px;
    &.gold {
        border: 1px solid rgba(212, 175, 55, 1);
    }
}
figure .button:hover {
    color: black;
    background: #DAFF45;
    cursor: pointer;
    &.gold {
        background: rgba(212, 175, 55, 1);
        color: white;
    }
}

figure.main figcaption {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 30%;
    padding: 50px 2.5% 50px 2.5%;
    align-content: center;
    justify-content: center;
}

figure.main figcaption h2 {
    font-size: 2.5rem;
    color: #F5F5F4;
    line-height: 1.5;
	font-family: 'Reakt';
	font-size: 1;
	font-weight: 700;
	font-size: 1rem;
	
	display: none;
}

figure.main figcaption h2 span {
    color: #F5F5F4; /* Default span color */
}

figure.main figcaption h3 {
    font-size: 1.35rem;
    color: #F5F5F4;
	margin-bottom: .25rem;
    letter-spacing: 0px;
	color: #DAFF45;
	color: white;
	font-weight: normal;
	border-left: 0px solid #DAFF45;
	padding-left: 0rem;
}

figure.main figcaption p {
    font-size: 1rem;
    color: #777;
    color: #f5f5f5;
	margin-bottom: 1rem;
    & span {
        font-size: 0.75rem;
        color: #555;
    }
    & svg {
        font-size: 0.85rem;
        fill: #777;
        display: inline;
    }
}

figure.main picture {
	position: relative;	
    display: flex;
    flex-flow: column nowrap;
    padding: 50px 2.5% 50px 7.5%;
    flex: 0 0 auto;
	z-index: 1;
	overflow: hidden;
}

figure.main picture::after {
	display: block;
	content: 'The Reaktor™';
	font-family: 'Reakt';
    font-size: .650rem;
    color: #F5F5F4;
    line-height: 1.25;
	margin-bottom: .5rem;
	margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
	color: #DAFF45;
	font-weight: 600;
	text-align: center;
}

figure.main picture::before {
    content: '';
    display: block;
    position: absolute;
    width: 140px; /* Width of the slanted line */
    height: 350px; /* Adjust height as needed */
    background: transparent; /* Color of the slanted line */
	border: 2px solid #DAFF45;
    top: 50%; /* Vertically center the element */
    left: 50%; /* Horizontally center the element */
    transform: translate(-50%, -50%) rotate(30deg) skewY(-30deg); /* Center and rotate by 30 degrees */
    transform-origin: center; /* Ensure the transform happens from the center */
    z-index: -1;
	
	display: none;
	/*
	content: '';
    width: auto;
    height: 300px;
    border-radius: 50%;
    margin: auto;
	background: #DAFF45;
	background: transparent;

	border: 1px solid #DAFF45;
    box-shadow: rgba(8, 8, 8, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	outline: 0px solid rgba(18, 18, 18, 1);
	position: absolute;
    top: 50%;
    left: 50%;
    transform:	
	z-index: 0;
	*/
}

figure.main picture img {
    width: auto;
    height: 500px;
    border: 0;
    border: none;
    border-radius: 0%;
    margin: auto;
	z-index: 1;
}

@media (max-width: 576px) {
    figure.main {
        flex-flow: column wrap;
    }
    figure.main figcaption h2 {
        text-align: left;
    }
    figure.main figcaption h3 {
        text-align: left;
    }
    figure.main figcaption p {
        text-align: left;
    }
    figure.main a {
        margin: 20px auto 0 auto;
    }
	figure.main picture {
		padding: 50px 5% 40px 5%;		
	}
	figure.main picture::before {
		content: '';
		width: auto;
		height: 200px;
		width: 200px;		
	}	
	figure.main picture img {
		height: 450px;
	}	
}

/* ------------------------------------------------------------------- 
 * ## review section
 * ------------------------------------------------------------------- */

.reviews {
    width: 100%;
    height: auto;
    background: #00ffcd;
    background: #555;
    background: none;
    background-color: transparent;
    display: block;
    overflow: hidden;
    max-width: 800px;
    margin: 1.5rem auto 1rem auto;
}
.swiper2 {
    width: 100%;
}
.swiper2 .swiper-slide {
    text-align: center;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.swiper2 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.trainer-built-items {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    /* Max 3 items per row */
    max-width: 900px;
}
.trainer-built-items div {
    flex: 1 0 0;
    min-width: 280px;
    padding: 1rem;
	background: blue;
	margin: 1rem 10px 1rem 10px;
	border: 1px solid #222222;
	background: #181818;
	border-radius: 4px;
	overflow: hidden;
}
.trainer-built-items svg {
    fill: #DAFF45;
    margin-bottom: 1rem;
}
.trainer-built-items h3 {
    font-size: 1.5rem;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}
.trainer-built-items p {
    color: white;
}

/* ------------------------------------------------------------------- 
 * ## badge plate (subscribe area)
 * ------------------------------------------------------------------- */
 
.image-plate {
	display: flex;
	width: 100%;
	align-content: center;
	justify-content: center;
	margin-bottom: 2rem;
}
.image-plate img {
	display: block;
	position: relative;
	width: 250px;
	height: auto;
}


/* -------------------------------------------------------------------
 * ## subscribe section
 * ------------------------------------------------------------------- */

.footer__subscribe .subscribe-form {
    margin: 4rem 0 0 0;
    padding: 0;
    position: relative;
}

.footer__subscribe #mc-form {
    width: 100%;
}

.footer__subscribe #mc-form input[type="email"] {
    width: 100%;
    height: 4.8rem;
    font-size: 1.4rem;
    line-height: 3.2rem;
    padding: 1.8rem 140px 1.8rem 64px;
    background: url(images/svg/icon-mail.svg) 24px center no-repeat,
        rgba(255, 255, 255, 0.1);
    background-size: 24px 16px, auto;
    color: white;
    margin-bottom: 1rem;
    border: none;
    border-radius: 4px;
	transition: all 0.3s ease; /* Smooth transition for focus and hover states */
}

.footer__subscribe #mc-form input[type="email"]:hover,
.footer__subscribe #mc-form input[type="email"]:focus {
    outline: none; /* Remove the default focus outline */
    border-color: #fafafa; /* Orange border to indicate focus */
    background-color: #222; /* Slightly lighter background on focus */
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6); /* Subtle glowing effect around the input 	
}

.footer__subscribe #mc-form input[type="email"]::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.3);
}

.footer__subscribe #mc-form input[type="email"]:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.footer__subscribe #mc-form input[type="email"]::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.footer__subscribe #mc-form input[type="email"]:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, 0.3);
}

.footer__subscribe #mc-form input[type="email"]::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgba(255, 255, 255, 0.3);
}

.footer__subscribe #mc-form input[type="email"]::placeholder {
    /* Most modern browsers support this now. */
    color: rgba(255, 255, 255, 0.3);
}

.footer__subscribe #mc-form input[type="email"].placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.footer__subscribe #mc-form input[type="submit"],
.footer__subscribe #mc-form button {
    background: #DAFF45;
    border-color: #DAFF45;
    margin-right: 0;
    padding: 0 20px 0 24px;
    height: 4.8rem;
    line-height: 4.8rem;
    border-radius: 0 4px 4px 0;
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Reakt", sans-serif;
	font-weight: normal;
	font-weight: 700;
	font-size: .875rem;
	color: black;
    text-transform: uppercase;
    cursor: pointer;
	outline: none;
	border: none;
}

.footer__subscribe #mc-form label {
    color: #ffffff;
    font-family: "Reakt", sans-serif;
	font-weight: 700;
    font-size: 1.3rem;
    padding: 0;
}

.footer__subscribe #mc-form label i {
    padding-right: 6px;
}

@media only screen and (max-width: 600px) {
    .footer__subscribe #mc-form input[type="email"] {
        padding: 0 2.4rem;
        background: rgba(255, 255, 255, 0.03);
        text-align: center;
    }
}
@media only screen and (max-width: 600px) {
    .footer__subscribe #mc-form input[type="submit"],
    .footer__subscribe #mc-form button {
        position: static;
        margin-right: 0;
        width: 100%;
        border-radius: 4px;
    }
}




















/* Figures with images */

figure.training {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    min-height: 420px;
    margin: 0 auto;
    background: transparent;
    margin-bottom: 5px;
    border-radius: 4px;
    width: 100%;
    border: 0px solid #777;
	max-width: 1200px;
}

figure.training figcaption {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 30%;
    padding: 50px 2.5% 50px 2.5%;
    align-content: center;
    justify-content: center;
}

figure.training figcaption h3 {
    font-size: 1.35rem;
    color: #F5F5F4;
	margin-bottom: .25rem;
    letter-spacing: 0px;
	color: #DAFF45;
	color: white;
	font-weight: normal;
	border-left: 0px solid #DAFF45;
	padding-left: 0rem;
}

figure.training figcaption p {
	color: #ddd;
	margin-bottom: 1rem;
	font-size: .95rem;
}

figure.training picture {
    display: flex;
	position: relative;
    flex-flow: column nowrap;
    padding: 50px 2.5% 50px 7.5%;
    flex: 0 0 auto;
}


figure.training picture::before {
    content: '';
    display: block;
    position: absolute;
    width: 140px; /* Width of the slanted line */
    height: 350px; /* Adjust height as needed */
    background: transparent; /* Color of the slanted line */
	border: 2px solid #DAFF45;
    top: 50%; /* Vertically center the element */
    left: 50%; /* Horizontally center the element */
    transform: translate(-50%, -50%) rotate(30deg) skewY(-30deg); /* Center and rotate by 30 degrees */
    transform-origin: center; /* Ensure the transform happens from the center */
    z-index: -1;
	
	display:none;
}

figure.training picture::after {
	content: 'Reaktion Series™';	
	display: block;
	font-family: 'Reakt';
    font-size: .650rem;
    color: #F5F5F4;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 2.5px;
	color: #DAFF45;
	font-weight: 600;
	text-align: center;
	position: relative;
	top: -50px;
}

figure.training picture img {
    width: 400px;
    height: auto;
    border: 0;
    border: none;
    border-radius: 00%;
    margin: auto;
    /*box-shadow: rgba(8, 8, 8, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
    outline: 0px solid rgba(18, 18, 18, 1);
    object-fit: contain;
}

figure.training:nth-of-type(1) picture img {
	filter: grayscale(10%);
	-webkit-filter: grayscale(10%);	
}

figure.training:nth-of-type(2) picture img {
	filter: grayscale(30%);
	-webkit-filter: grayscale(30%);	
}

figure.training:nth-of-type(3) picture img {
	filter: grayscale(10%);
	-webkit-filter: grayscale(10%);	
}

figure.training:nth-of-type(4) picture img {
	filter: grayscale(50%);
	-webkit-filter: grayscale(50%);	
}

figure.training:nth-of-type(5) picture img {
	filter: grayscale(20%);
	-webkit-filter: grayscale(20%);	
}

@media (max-width: 576px) {
    figure.training {
        flex-flow: column wrap;
    }
    figure.training figcaption h2 {
        text-align: left;
    }
    figure.training figcaption h3 {
        text-align: left;
    }
    figure.training figcaption p {
        text-align: left;
    }
    figure.training a {
        margin: 20px auto 0 auto;
    }
	figure.training picture {
		padding: 50px 5% 40px 5%;		
	}
    figure.training picture img {
        width: auto;
        min-width: auto;
        height: 550px;
    }
}