/* Tab Slider */

.custom-slider {
	position: relative;
}


	/* Slides */

	.cs-content {
		display: block;
		overflow: hidden;
		padding-top: 0;
		position: relative;
		width: 100%;
	}

		.cs-slide {
			background: #fff;
			height: 0;
			left: 100%;
			overflow: hidden;
			opacity: 0;
			position: relative;
			top: 0;
			transition: .3s left, .6s opacity;
			width: 0;
		}

		.cs-slide.active {
			height: 100%;
			left: 0;
			opacity: 1;
			width: 100%;
			z-index: 1;
		}

			.cs-slide img {
				float: right;
				width: 100%;
			}

			.cs-slide .cs-slide-wrap {
				align-items: center;
				box-sizing: border-box;
				display: flex;
				height: 101%;
				left: 0;
				padding: 30px 5% 30px 5%;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 40%;
			}

			.cs-slide.cs-slide-bg-has-angle .cs-slide-wrap {
				transform: translateY(-50%) skew(-10deg, 0);
				margin-left: -5%;
				padding-left: 10%;
				width: 50%;
			}

			.cs-slide.cs-slide-bg-tight .cs-slide-wrap {
				background: none !important;
				padding: 0;
				left: 7%;
			}

				.cs-slide .cs-slide-wrap > div {
					box-sizing: border-box;
					width: 100%;
				}

				.cs-slide-bg-has-angle .cs-slide-wrap > div {
					transform: skew(10deg, 0);
				}

				.cs-slide.cs-slide-bg-tight .cs-slide-wrap > div {
					border-radius: 2px;
					padding: 30px;
				}

					.cs-slide h2 {
						color: #fff;
						font-size: 46px;
						line-height: 46px;
						margin-bottom: 10px;
					}

						.cs-slide.title-text-size-small h2 {
							font-size: 31px;
							line-height: 31px;
							margin-bottom: 6px;
						}

						.cs-slide.title-text-size-large h2 {
							font-size: 56px;
							line-height: 56px;						
						}

						.cs-slide.title-text-size-small-bold h2 {
							font-family: gemcore_bold;
							font-size: 31px;
							line-height: 31px;
							margin-bottom: 6px;
						}

						.cs-slide.title-text-size-normal-bold h2 {
							font-family: gemcore_bold;
							font-size: 46px;
							line-height: 46px;
							margin-bottom: 10px;
						}

						.cs-slide.title-text-size-large-bold h2 {
							font-family: gemcore_bold;
							font-size: 56px;
							line-height: 56px;						
						}

					.cs-slide p {
						color: #fff;
						font-size: 22px;
						line-height: 27px;
						margin: 0;
					}

						.cs-slide.content-text-size-small p {
							font-size: 16px;
							line-height: 23px;
						}

						.cs-slide.content-text-size-large p {
							font-size: 30px;
							line-height: 32px;	
						}

						.cs-slide.content-text-size-small-bold p {
							font-family: gemcore_bold;
							font-size: 16px;
							line-height: 23px;
						}

						.cs-slide.content-text-size-normal-bold p {
							font-family: gemcore_bold;
							font-size: 22px;
							line-height: 27px;
						}

						.cs-slide.content-text-size-large-bold p {
							font-family: gemcore_bold;
							font-size: 30px;
							line-height: 32px;	
						}

					.cs-slide .btns {
						margin-top: 25px;
					}

						.cs-slide .btn {
							display: inline-block;
							font-size: 22px;
							line-height: 26px;
							max-width: 460px;
							padding: 14px 35px;
						}


			/* Content on Right (Admin Option) */

			.cs-slide.cs-slide-content-right .cs-slide-wrap {
				left: auto;
				right: 0;
				transform: translateY(-50%);
			}

			.cs-slide.cs-slide-content-right.cs-slide-bg-has-angle .cs-slide-wrap {
				transform: translateY(-50%) skew(10deg, 0);
				margin: 0 -5% 0 0;
				padding: 0 10% 0 5%;
			}

			.cs-slide.cs-slide-content-right.cs-slide-bg-tight .cs-slide-wrap {
				left: auto;
				right: 7%;
			}

				.cs-slide.cs-slide-content-right.cs-slide-bg-has-angle .cs-slide-wrap > div {
					transform: skew(-10deg, 0);
				}

					.cs-slide.cs-slide-content-right img {
						float: left;
					}


			/* Content Center (Admin Option) */

			.cs-slide.cs-slide-content-center .cs-slide-wrap {
				left: 50%;
				right: auto;
				transform: translate(-50%, -50%);
				width: 50%;
			}

			.cs-slide.cs-slide-content-center.cs-slide-bg-has-angle .cs-slide-wrap {
				transform: translateY(-50%, -50%) skew(0, 0);
				margin: 0;
				padding: 30px 5%;
			}

				.cs-slide.cs-slide-content-center .cs-slide-wrap > div {
					padding: 0;
					text-align: center;
				}

				.cs-slide.cs-slide-content-center.cs-slide-bg-tight .cs-slide-wrap > div {
					padding: 30px;
				}

				.cs-slide.cs-slide-content-center.cs-slide-bg-has-angle .cs-slide-wrap > div {
					transform: skew(0, 0);
				}

					.cs-slide.cs-slide-content-center .btn {
						margin: 0 auto;
					}


    /* Loading Spinner */
    
    .loading-spinner {
        animation: spin .6s linear infinite;
        border: 6px solid #e5e5e5;
        border-top: 6px solid #fdb714;
        border-radius: 50%;
        height: 40px;
        left: 50%;
        margin: -20px;
        position: absolute;
        top: 50%;
        width: 40px;	
    }
    
    @keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }

	/* Next & Prev Nav */

	.cs-next-prev {
		left: 10px;
		opacity: .5;
		position: absolute;
		transition: .3s opacity;
		top: calc(50% - 23px);
		z-index: 1;
	}

	.cs-next-prev.prev {
		border-bottom: 23px solid transparent; 
		border-top: 23px solid transparent;
		border-right:23px solid white; 
		height: 0; 
		width: 0; 
	}

	.cs-next-prev.next {
		border-bottom: 23px solid transparent;
		border-top: 23px solid transparent;
		border-left: 23px solid white;
		height: 0; 
		width: 0; 
		left: auto;
		right: 10px;
	}

		.cs-next-prev:hover,
		.cs-next-prev:focus {
			opacity: 1;
			outline: none;
		}





/* Product Slider Specific Styles */

.block-tab-slider.block-product-slider {
    /* margin: 0 auto;
    max-width: 1200px;
    width: 100%; */
}

    .block-product-slider .cs-slide {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 60px;
    }


        .block-product-slider .cs-slide .ps-slide-image {
            display: block;
            float: none;
            margin: 0 auto;
            max-width: 450px;
            order: 2;
        }

        .block-product-slider .ps-slide-wrap {
            width: 50%;
        }

            .block-product-slider .cs-slide.title-text-size-large-bold h2 {
                color: #444444;
                font-size: 29px;
                line-height: 29px;
            }

            .block-product-slider .ps-slide-wrap .faux-h4 {
                margin-bottom: 15px;
            }

            .block-product-slider .cs-slide .btn {
                font-size: 18px;
                line-height: 22px;
                padding: 8px 25px;
            }

    .block-product-slider .cs-next-prev.next {
        border-left-color: #444444;
    }

    .block-product-slider .cs-next-prev.prev {
        border-right-color: #444444;
    }






    @media only screen and (max-width: 1200px) {

        .cs-slide h2 {
            font-size: 38px;
            line-height: 38px;
        }
    
            .cs-slide.title-text-size-small h2 {
                font-size: 25px;
                line-height: 25px;
            }
    
            .cs-slide.title-text-size-large h2 {
                font-size: 47px;
                line-height: 47px;						
            }
    
            .cs-slide.title-text-size-small-bold h2 {
                font-size: 25px;
                line-height: 25px;
            }
    
            .cs-slide.title-text-size-normal-bold h2 {
                font-size: 38px;
                line-height: 38px;
            }
    
            .cs-slide.title-text-size-large-bold h2 {
                font-size: 47px;
                line-height: 47px;						
            }
    
        .cs-slide p {
            font-size: 18px;
            line-height: 24px;
        }
    
            .cs-slide.content-text-size-small p {
                font-size: 15px;
                line-height: 21px;
            }
    
            .cs-slide.content-text-size-large p {
                font-size: 22px;
                line-height: 27px;	
            }
    
            .cs-slide.content-text-size-small-bold p {
                font-size: 15px;
                line-height: 21px;
            }
    
            .cs-slide.content-text-size-normal-bold p {
                font-size: 18px;
                line-height: 24px;
            }
    
            .cs-slide.content-text-size-large-bold p {
                font-size: 22px;
                line-height: 27px;	
            }
            
    } /* 1200px */
    
    
    @media only screen and (max-width: 1000px) {
    
        .cs-slide h2 {
            font-size: 30px;
            line-height: 30px;
        }
    
            .cs-slide.title-text-size-small h2 {
                font-size: 22px;
                line-height: 22px;
            }
    
            .cs-slide.title-text-size-large h2 {
                font-size: 37px;
                line-height: 37px;						
            }
    
            .cs-slide.title-text-size-small-bold h2 {
                font-size: 22px;
                line-height: 22px;
            }
    
            .cs-slide.title-text-size-normal-bold h2 {
                font-size: 30px;
                line-height: 30px;
            }
    
            .cs-slide.title-text-size-large-bold h2 {
                font-size: 37px;
                line-height: 37px;						
            }
    
        .cs-slide p {
            font-size: 16px;
            line-height: 22px;
        }
    
            .cs-slide.content-text-size-small p {
                font-size: 14px;
                line-height: 20px;
            }
    
            .cs-slide.content-text-size-large p {
                font-size: 19px;
                line-height: 23px;	
            }
    
            .cs-slide.content-text-size-small-bold p {
                font-size: 14px;
                line-height: 20px;
            }
    
            .cs-slide.content-text-size-normal-bold p {
                font-size: 16px;
                line-height: 22px;
            }
    
            .cs-slide.content-text-size-large-bold p {
                font-size: 19px;
                line-height: 23px;	
            }
    
        .ht-nav a {
            font-size: 19px;
            padding: 18px 8px;
        }
            
    } /* 1000px */
    
    
    @media only screen and (max-width: 850px) {
    
        .block-tab-slider .custom-slider *[class*="cs-slide"] .cs-slide-wrap {
            left: 0;
            margin: 0;
            padding: 0;
            position: relative;
            right: 0;
            transform: translateY(0) skew(0);
            width: 100%;
        }
    
            .cs-slide img {
                display: none;
            }
    
            .block-tab-slider .custom-slider *[class*="cs-slide"] .cs-slide-wrap > div {
                transform: skew(0);
                margin: 0 auto;
                padding: 70px 11%;
            }
    
        .cs-next-prev.prev {
            border-bottom: 15px solid transparent;
            border-top: 15px solid transparent;
            border-right: 15px solid white;
            left: 10px;
            top: calc(50% - 15px);
        }
    
        .cs-next-prev.next {
            border-bottom: 15px solid transparent;
            border-top: 15px solid transparent;
            border-left: 15px solid white;
            left: auto;
            right: 10px;
            top: calc(50% - 15px);
        }
    
        .ht-nav a {
            font-size: 15px;
            padding: 14px 5px;
        }
    
    } 
    
    
    @media only screen and (max-width: 850px) {

        .block-product-slider .cs-slide {
            display: block;
            padding: 0 50px;
        }
    
            .block-product-slider .cs-slide .ps-slide-image {
                order: -1;
                width: 100%;
            }
    
                .block-product-slider .cs-slide .ps-slide-image img {
                    display: block;
                    float: none;
                }
    
            .block-product-slider .ps-slide-wrap {
                text-align: center;
                width: 100%;
            }
        
    } /* 850px */
    
    
    @media only screen and (max-width: 600px) {
    
        .cs-slide .btn {
            font-size: 20px;
            line-height: 23px;
            padding: 9px 15px;
        }
    
        .ht-nav {
            justify-content: center;
            flex-wrap: wrap;
        }
    
            .ht-nav a {
                flex: 0 1 50%;
                box-sizing: border-box;
                border: 0;
            }
    
    } /* 600px */



/* Admin Styles - Hid this because there are no ACF fields and it doesn't display in the admin very well */

.acf-block-preview .gemco-ui-block.block-product-slider:before {
    align-items: center;
    content: "Featured Products Will Display Here";
    display: block;
    font-size: 23px;
    font-weight: bold;
    padding: 20px 0;
}

.acf-block-preview .block-product-slider > div {
    display: none !important;
}