/**
*
* LANDING-CONTENT.CSS
*
* Adding CG4.5 landing page styles here to keep CSS separate from main callawaygolf.css file.
*
*
*/

.product-landing-page-container #page-content{ padding: 8rem 0; }


/* LOGO AND TEXT CONTENT ASSET */
.product-landing-page-container .slot > div{ padding-top: 3rem; padding-bottom:3rem; }
.product-landing-page-container #product-landing-slot-header.slot > div{ padding: 0; }
.product-landing-page-container .headline{ margin-bottom: 1.5rem; }
.logo-and-text-container{ max-width: 600px; text-align: center; margin: 0 auto; padding:0 15px; }
.logo-and-text-container img{ max-width: 200px; margin-bottom: 2rem; }

.image-and-text-container{ max-width: 700px; text-align: center; margin: 0 auto; }
.image-and-text-container img{ margin-bottom: 4rem; }

.yt-content-asset-container{ text-align: center; }
.yt-content-asset-container h1{ margin-bottom: 2rem; }

.product-landing-page-container .swiper-wrapper{ height: auto; }

.product-landing-page-container .media-play-button .play-icon{ color: #000; }

.product-landing-page-container .slot-hero .content{ height: auto; }

.product-landing-page-container .landing-hero.mobile{ background-position: center !important;}

/*
 * PDP Lifestyle Images Gallery Carousel
 */
.lifestyle-container {position: relative;height: auto;  overflow: visible; text-align: center; }
.lifestyle-container .lifestyle-wrapper { max-height: calc(100vh - 140px); overflow: hidden; }
.lifestyle-container .lifestyle-wrapper .slick-list{ padding: 0 5% 0 0 !important; }
.lifestyle-container .pdp-gallery-image { width: 100%; height: auto; }
.lifestyle-container .pdp-image-slide { padding: 0; }
.lifestyle-container .slick-slide.lifestyle-slide { height:auto; padding: 0 20px 0 0; opacity: 1; transition: 0.3s; cursor: pointer;}
.lifestyle-container .slick-slide.lifestyle-slide .lifestyle-img.box{
    background-size: cover;
    background-position: center;
}
.lifestyle-container .slick-slide.lifestyle-slide:hover{ opacity: 0.85; transition: 0.3s;}

.lightbox-container i:hover{ transform: scale(1.05); transition: transform 0.3s; }

.lightbox-container .lightbox-img{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s; 
}
.lightbox-container .lightbox-img.open{ opacity: 1; transition: opacity 0.3s; z-index: 100; }

.lifestyle-container .carousel-button-prev:not(.slick-hidden),
.lifestyle-container .carousel-button-next:not(.slick-hidden){ margin: 1rem 1rem 0 0; position: absolute; display: inline-block !important;  }
.lifestyle-container .slick-arrow{opacity: 1; transition: opacity 0.2s;}
.lifestyle-container .slick-arrow.slick-disabled{opacity: 0; transition: opacity 0.2s;}

.lifestyle-container .fa-chevron-right:before,
.lifestyle-container .fa-chevron-left:before{ 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lifestyle-container .carousel-button-prev,
.lifestyle-container .carousel-button-next,
.lightbox-container .lightbox-swiper-btn-prev,
.lightbox-container .lightbox-swiper-btn-next {
    font-weight: bold;
    width: 50px;
    height: 50px;
    padding: 0;
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    z-index: 100000000;
    position: absolute;
    top: auto;
    bottom: 0;
    cursor: pointer;
}

.lifestyle-container .carousel-button-prev,
.lifestyle-container .carousel-button-prev:hover,
.lifestyle-container .carousel-button-next,
.lifestyle-container .carousel-button-next:hover { transition: all 0.2s; }

.lightbox-container .lightbox-swiper-btn-prev,
.lightbox-container .lightbox-swiper-btn-next{ top: calc(50% - 1rem); }

.lightbox-container .lightbox-swiper-btn-prev i,
.lightbox-container .lightbox-swiper-btn-next i{
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-container .lightbox-swiper-btn-prev{ left: 0; }
.lightbox-container .lightbox-swiper-btn-next{ right: 0; }

/*
 * Instagram Iframe
 */
.product-landing-page-container iframe.instagram-media{ margin: 0 auto !important; padding: 0 1rem !important; }


@media (min-width: 769px){
	
	.lifestyle-container .carousel-button-prev, .lifestyle-container .carousel-button-next {
	    top: calc(50% - 4rem);
	    position: absolute;
	    z-index: 1000;
	}
	
	.lifestyle-container .carousel-button-next {
	    right: -2rem;
	}
	.lifestyle-container .carousel-button-prev {
	    left: -1rem;
	}
	
}

@media (min-width: 992px){
	
	.alternating-image-text .alternating-image-text-content{
	    display: flex;
	    align-items: center;
	    position: relative;
	}
	
	.alternating-image-text .content p{ font-size: 16px; font-weight: 100; margin: 4rem 0;}
	.alternating-image-text .overlay-image{
        width: 600px;
    	flex: 1 0 45%;
	}
	
	.alternating-image-text .alternating-image-text-content:nth-of-type(even){ flex-direction: row-reverse}
	
	
	.alternating-image-text .overlay-text{
	    flex: 1 0 auto;
    	padding: 0 7rem;
    	width: 500px;
    	display: flex;
    	align-items: center;
	}
	.alternating-image-text .alternating-image-text-content:nth-of-type(even) .overlay-text{
		padding-left: 0;
	}
	.alternating-image-text .alternating-image-text-content:nth-of-type(odd) .overlay-text{
	    padding-right: 0;
	}
	
	.alternating-image-text .overlay-text{
	    z-index: 1;
	    display: flex;
	    align-items: center;
	}
	
	.lightbox-container .lightbox-swiper-btn-prev{ left: 3rem; }
	.lightbox-container .lightbox-swiper-btn-next{ right: 3rem; }
	
}

@media (min-width: 1440px){
	.lightbox-container .lightbox-swiper-btn-prev{ left: 5rem; }
	.lightbox-container .lightbox-swiper-btn-next{ right: 5rem; }
}

@media (max-width: 769px){
	.product-landing-page-container .slot-hero .content.mobile{ margin-bottom: 1rem;  }
	.product-landing-page-container #page-content{ padding:  4rem 0 8rem 0; }
	.lifestyle-container .carousel-button-prev:not(.slick-hidden), .lifestyle-container .carousel-button-next:not(.slick-hidden){
	    position: static;
    	margin: 0.5rem;
    }
    .lightbox-container .lightbox-img{ width: 95%; background-size: cover; }
}