/*
	Theme Name: Fitness theme
	Theme URI: https://webrazvoj.eu
	Description: HTML5 Blank WordPress Theme
	Version: 1.0
	Author: Webrazvoj
	Author URI: https://webrazvoj.eu
	Tags: Blank, HTML5, CSS3, Bootstrap, jQuery

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/


/*********************** 
	DESKTOP STYLE 
***********************/

:root {
	--primarycolor: #041934;
	--lightbg: #e2f5f9;
	--darkbg: #19232f;
	--red: #0056b3;
	--white: #ffffff;
	--black: #000000;
}

body {
	color: var(--primarycolor);
}

a, a:hover {
    color: var(--red);
}

section:not(.home_slide_wrapp) {
	padding: 80px 0;
}

header.header {
	z-index: 99999;
    opacity: 1;
    background: rgba(0,0,0,0.5);
    padding-top: 0;
    position: absolute;
    width: 100%;
}

.navbar-brand img {
    height: 80px;
	width: auto;
}

#menu-top a {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--white);
    padding: 0 15px;
}

ul.dropdown-menu.show {
    background-color: var(--darkbg);
}

.home_slide_wrapp {
	background-image: url(/wp-content/themes/fitness/img/banner_bg.jpg);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--red);
}

.carousel-item {
	height: 700px;
	max-width: 80%;
    margin: 0 auto;
	display: none;
	float: none;
}

.carousel-item.active {
	display: flex;
	align-items: center;
    justify-content: flex-start;
    gap: 10%;
}


.slide_image_wrapp {
    min-width: 30%;
}

.slider_image {
	width: auto;
    height: 700px;
	max-width: initial;
}

.caption {
    text-transform: uppercase;
    color: var(--white);
	text-align: right;
	min-width: 70%;
}

.caption h1 {
    font-size: 70px;
    max-width: 70%;
}

.caption h1 span {
	color: var(--red);
}

.caption p {
    font-size: 32px;
    max-width: 70%;
}

.about_me_wrapp {
	background-color: var(--darkbg);
	min-height: 560px;
}

.about_cont {
    padding-top: 170px;
    position: relative;
}

.about_cont img {
    height: 400px;
    width: auto;
    background-color: var(--black);
    position: absolute;
    top: 0;
	filter: grayscale(1);
}

.home .about_text {
    position: relative;
    padding-left: 150px;
    color: var(--white);
    font-size: 30px;
    text-shadow: 2px 1px var(--black);
    text-transform: uppercase;
    line-height: 32px;
    font-weight: bold;
}

.about_text h2 {
    margin-bottom: 0;
}

.about_text strong {
	color: var(--red);
    font-size: 45px;
}

section.phil_wrapp {
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
}

.phil_text.about_text strong {
    font-size: 32px;
	color: var(--white);
}

.phil_text.about_text {
    padding: 0;
    font-size: 20px;
    line-height: 26px;
    text-transform: none;
}

section.home_products_wrapp {
    background-color: var(--darkbg);
}

.home_products {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 40px;
}

ul.home_products li {
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
    margin-bottom: 40px;
    padding: 40px;
    position: relative;
    border: 1px solid var(--darkbg);
}

ul.home_products li.active, 
ul.home_products li:hover {
    border: 1px solid var(--red);
}

ul.home_products li .description,
.cart-subtotal,
.cart-subtotal.recurring-total {
    display: none;
}

ul.home_products li.active .description, 
ul.home_products li a {
    display: block;
    position: relative;
    color: var(--white);
    text-shadow: 2px 1px var(--black);
    text-transform: uppercase;
    font-weight: bold;
    padding: 0;
    font-size: 20px;
    line-height: 22px;
}

.add-to-cart {
    display: inline-block;
}

#back-to-top {
    position: fixed;
    bottom: 4em;
    right: 0.5em;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    background-color: var(--color-primary);
    border: 1px solid var(--color-light);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    z-index: 1000;
}

#back-to-top.show {
    visibility: visible;
    opacity: 1;
    bottom: 3em;
    rotate: -90deg;
}

a#back-to-top img {
    display: none;
}

footer.footer {
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
    padding-top: 10px;
    text-align: center;
    color: #fff;
}

.single_carousel .caption {
    position: absolute;
    text-align: center;
    top: 40%;
    left: 15%;
    width: 70%;
    max-width: 70%;
}

.single_carousel {
    position: relative;
}

.single_slide_item.group {
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home section.page_content_wrapp.content {
    position: relative;
    /*padding-left: 150px;*/
    font-size: 20px;
    /*text-shadow: 2px 1px var(--black);*/
    text-transform: uppercase;
    line-height: 32px;
    font-weight: bold;
}

section.page_content_wrapp.content {
    background-color: var(--darkbg);
	color: var(--white);
}

.woocommerce-notices-wrapper {
    display: none;
}

section.page_content_wrapp.content.checkout_content {
    padding-left: 0;
}

#checkform {
    font-size: 18px;
    text-transform: none;
    font-weight: 400;
    text-shadow: none;
}

.woocommerce form#checkform .form-row input.input-text,
.woocommerce form#checkform .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--white);
    color: var(--white);
}

.woocommerce form#checkform .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--white);
}

#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
    background: transparent;
}

.woocommerce table.shop_table tbody th, 
.woocommerce table.shop_table tfoot td, 
.woocommerce table.shop_table tfoot th {
    border-top: 1px solid var(--white);
}

.woocommerce table.shop_table,
.woocommerce table.shop_table thead > tr {
    border: 1px solid var(--white);
    border-width: 1px;
}

.wc-block-components-main.wc-block-checkout__main.wp-block-woocommerce-checkout-fields-block label {
    text-shadow: none;
}

.wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block.is-sticky.is-large {
    border: 1px solid var(--red);
    padding-left: 0;
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
}

.phil_text.about_text.news_section_title {
    margin-bottom: 40px;
}

.home_post_link_wrapp,
.home_post_link_wrapp:hover {
    color: #ffff;
    text-decoration: none;
}

.post_title.small_post_title {
    font-size: 20px;
    text-transform: uppercase;
}

.text-left.post_title {
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
}

section.page_content_wrapp.content.post_content {
    text-transform: none;
}

.plan_list .plan_title_wrapp:not(:first-child) {
    margin-top: 80px;
}

.plan_link_wrapp {
    position: relative;
    display: block;
}

.plan_text_wrapp {
    position: absolute;
    height: 100px;
    bottom: calc(50% - 50px);
    text-align: center;
    width: 80%;
    left: 10%;
    background-color: rgba(0,0,0,0.4);
    padding-top: 15px;
}

.plan_text_wrapp h5 {
    font-size: 30px;
    text-transform: uppercase;
}

.set_wrapp {
    text-decoration: none;
    color: #fff;
    border: 1px solid var(--red);
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: var(--darkbg);
    color: var(--white);
    font-size: 30px;
    text-shadow: 2px 1px var(--black);
    text-transform: uppercase;
    line-height: 32px;
    font-weight: bold;
}

.accordion-button:focus {
    box-shadow: none;
    border: 1px solid var(--red);
}

.accordion-item {
    border: 1px solid var(--red);
}

.accordion-body {
    background: var(--darkbg);
}

.workout_list {
    padding: 0;
    margin: 0;
}

.exercise_info {
    color: #fff;
}

.exercise_title {
    font-size: 20px;
    margin-bottom: 5px;
}

.muscle,
.diff,
.equipment {
    padding: 0;
    list-style-type: none;
    margin: 0;
	display: flex;
    gap: 8px;
}

.muscle li,
.diff li,
.equipment li {
    display: inline-block;
    background-color: var(--darkbg);
    padding: 5px 15px 7px 15px;
    border-radius: 5px;
	background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
}

.muscle a,
.diff a,
.equipment a {
    color: #fff;
    text-decoration: none;
}

.workout_plan_wrapp {
    display: block;
    height: 100%;
}

.workout_image {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.image-wrapper {
    position: relative;
    padding-top: 75%; /* This creates a 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f5f5f5;
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workout_plan_wrapp:hover .image-wrapper img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* News Section Image Styles */
.small_post_image_wrapp {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.small_post_wrapp .image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: 0;
}

.small_post_wrapp .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home_post_link_wrapp:hover .image-wrapper img {
    transform: scale(1.05);
}

/* PLUGIN CSS */

.ft-login-container {
    border: 1px solid var(--red);
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
    min-width: 400px;
}

.ft-profile-card {
    border: 1px solid var(--red);
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
}

.ft-profile-header h1,
.ft-profile-card h2,
.ft-upload-note,
.ft-initial-upload p {
    color: #fff;
	text-align: center;
}

.ft-form-group label {
	color: #fff;
	margin-bottom: 0;
}

.ft-form-row,
#ft-fitness-form .ft-form-row label {
    margin-bottom: 0;
}

.selected-file-name:empty {
	margin-left: 0;
}

.ft-initial-upload {
    padding: 0px 0px;
    background-color: transparent;
    border-radius: 0px;
    margin: 1.5rem 0;
}

.ft-file-upload-wrapper label {
	margin-right: 0;
}

.ft-profile-picture {
    width: auto;
    display: table;
	margin-bottom: 0;
}

form#ft-fitness-form .ft-form-row {
    gap: 0.5rem;
}

.ft-login-container h2 {
    color: #fff;
}

.ft-login-container p {
    color: #fff;
}

form#loginform input {
    display: block;
    width: 100%;
	min-height: 40px;
}

.ft-login-container p,
.selected-file-name,
p.phil_text.about_text {
    color: #fff;
}

form#loginform input#rememberme {
    max-height: 10px;
    height: 10px;
    display: inline-block;
    width: auto;
}

p.login-remember label {
    display: flex;
    gap: 15px;
    align-items: center;
}

#loginform p {
	text-align: left;
}

form#loginform input#wp-submit {
    background-color: var(--red);
    border: none;
    color: #fff;
	font-size: 20px;
}

a.workout_plan_wrapp {
    text-decoration: none;
    color: #fff;
}

.pagination {
    margin: 40px 0;
    justify-content: center;
}

.pagination span, 
.pagination a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
    margin: 0 5px;
    font-size: 20px;
}

.pagination .current {
    background-color: var(--red);
}

.ft-plan-image img {
    max-height: 300px;
    width: auto;
    /*border-radius: 50%;*/
    border: 1px solid var(--red);
}

.ft-plan-header {
    display: flex;
    align-items: center;
    gap: 20px;
	margin-bottom: 40px;
}

.ft-plan-description {
    color: #fff;
    font-size: 18px;
    line-height: 32px;
	margin-bottom: 40px;
}

.ft-week {
    background: #e9ecef;
    border: 2px solid var(--red);
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
}

.ft-week h3 {
    text-align: center;
    color: #fff;
    margin: 1rem 0 2rem 0;
}

span.ft-day-label {
    color: var(--red);
    font-weight: bold;
}

ul.ft-exercise-list {
    padding-left: 0px;
	list-style-type: none;
}

ul.ft-exercise-list li {
    font-weight: 500;
}

ul.ft-exercise-list li small {
    font-weight: 100;
    font-size: 12px;
	margin-left: 0;
}

.ft-modal-content h2 {
    text-align: center;
    margin-bottom: 20px;
}

.ft-exercise-item h3 {
    margin-bottom: 0;
	text-align: center;
}

.ft-exercise-meta {
    margin: 0px 0;
    color: #666;
}

.ft-set-row {
    position: relative;
}

.ft-remove-set {
    background: var(--red);
    font-size: 15px;
    position: absolute;
    top: -5px;
    right: -5px;
}

.ft-exercise-meta {
    margin: 0px 0;
    justify-content: center;
}

.ft-add-set {
    display: block;
    margin: 0 auto;
}

.ft-dashboard-header,
.ft-dashboard-grid > div {
    background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
    border: 2px solid var(--red);
	text-align: center;
}

.ft-dashboard-header h1,
.ft-dashboard-grid h2 {
    color: #fff;
}

.ft-plan-preview {
	background: transparent;
}

.ft-plan-preview img {
	max-width: 100%;
	border: 1px solid #fff;
}

.ft-plan-preview h3 {
	color: #fff;
	font-size: 24px;
}

.ft-workout-accordion .ft-workout-header,
.ft-workout-accordion .ft-workout-header:hover {
	background: #007bff;
}

.ft-workout-accordion .ft-workout-content {
	text-align: left;
}

button.ft-button.ft-cancel-plan {
    margin-left: 0;
}

.ft-progress-bar {
	display: none;
}

ul.ft-exercise-list a,
ul.ft-exercise-list a:hover {
    text-decoration: underline;
    color: var(--primarycolor);
}

.ft-workout-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    background: #007bff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 40px;
}

.ft-workout-preview h3 {
    margin: 0;
}

.ft-modal-header h3 {
    color: #000;
}

form#custom-workout-form label,
#workout-modal #workout-content h2,
#workout-modal #workout-content h3,
#workout-modal #workout-content .ft-set-number{
    color: #000;
}

.ft-exercise-item {
    margin-bottom: 10px;
}

.ft-exercise-item label {
    margin-bottom: 0;
}

div#custom-workout-modal label {
    margin-bottom: 0;
}

.side_icons {
    position: fixed;
    right: 0;
    top: 35%;
	z-index: 999;
}

.side_icons_wrapp {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
 
.side_icons_wrapp a {
    color: #fff;
    font-size: 24px;
    background-color: #0056b3;
    display: flex;
    height: 40px;
    width: 40px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
	border-radius: 5px 0 0 5px;
}

.video iframe {
    max-width: 100%;
}

.caption h2 {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 30px;
    display: inline-block;
}

/*********************** 
	TABLET STYLE 
***********************/

@media (max-width: 1200px) {

	.caption h1 {
		font-size: 50px;
		max-width: 70%;
	}
	
	.caption p {
		font-size: 20px;
		max-width: 70%;
	}
	
}

/*********************** 
	TABLET STYLE 
***********************/

@media (max-width: 991.98px) {
	
	.navbar-toggler-icon {
        background-image: url(/wp-content/themes/fitness/img/hamb_icon.svg);
    }

    .navbar-toggler:focus {
        border: none;
        box-shadow: none;
    }
	
	#carousel .caption {
        position: absolute;
        bottom: 15%;
        max-width: 100%;
        text-align: center;
        left: 10%;
        max-width: 80%;
    }
	
	#carousel .caption h1 {
        font-size: 40px;
        max-width: 100%;
    }
	
	#carousel .caption p {
        font-size: 24px;
        max-width: 100%;
    }
	
	span.post_date {
		margin-bottom: 0.5rem;
		display: block;
	}
	
	.single_carousel .caption {
		position: absolute;
		text-align: center;
		top: 43%;
		left: 10%;
		max-width: 80%;
		width: 80%;
	}
	
}

/*********************** 
	MOBILE STYLE 
***********************/

@media (max-width: 767.98px) {
	
    .carousel-item.active {
        display: block;
        align-items: center;
        justify-content: flex-start;
        gap: 0%;
        position: relative;
        max-width: 100%;
    }

    .slide_image_wrapp {
        min-width: 100%;
    }

    .caption {
        position: absolute;
        bottom: 15%;
        max-width: 100%;
        text-align: center;
    }
	
	.single_carousel .caption {
		width: 90%;
		left: 5%;
		max-width: 90%;
	}

    #carousel .caption h1 {
        font-size: 40px;
        max-width: 100%;
    }

    #carousel .caption p {
        font-size: 20px;
        max-width: 100%;
    }

    .about_text {
        padding-left: 15px;
    }
    
    .phil_text.about_text {
        font-size: 16px;
        line-height: 26px;
    }

    ul.home_products li {
        padding: 10px;
    }

    ul.home_products li.active .description, 
    ul.home_products li a {
        font-size: 16px;
        line-height: 26px;
    }
	
	.ft-login-container {
		border: 1px solid var(--red);
		background-image: url(/wp-content/themes/fitness/img/phil-bg.png);
		min-width: auto;
		max-width: 100%;
		padding: 1rem;
	}
	
	.ft-login-required {
		max-width: 400px;
		margin: 2rem auto;
		padding: 0rem;
	}

}

@media(max-width: 500px) {

    img.img-fluid.slider_image {
		max-width: 100%;
		height: auto;
	}
	
	.caption {
		bottom: 10%;
	}
	
	.carousel-item {
		height: 550px;
	}
	
	#carousel .caption h1 {
        font-size: 28px;
        max-width: 100%;
    }
	
	#carousel .caption p {
        font-size: 18px;
        max-width: 100%;
    }
	
	.home .about_text {
		padding-left: 0;
		font-size: 18px;
		line-height: 28px;
	}
	
	.post_title.small_post_title {
		font-size: 18px;
	}
	
	.about_cont img {
		height: auto;
	}
	
	.phil_text.about_text strong {
		font-size: 28px;
		color: var(--white);
		margin-bottom: 10px;
		display: block;
	}
	
	.ft-plan-header {
		gap: 0px;
		flex-direction: column;
	}
	
	.ft-set-number {
		font-weight: bold;
		min-width: 50px;
	}
	
	.ft-input-group label {
		font-size: 14px;
		text-align: center;
	}
	
	.ft-sets-header span:last-child, .ft-set-row input:last-child {
        display: block;
    }
	
	.ft-sets-container .ft-set-row {
        display: flex;
        flex-direction: column;
    }

}