@import "../../../abstracts/abstracts";

.quote-container {
    overflow:hidden;
}

.quote-carousel {
	padding-top: rem(10);
	padding-bottom: rem(10);
	height: rem(620);
    position: initial;
    cursor:default;

	//min-height: rem(335);

	.slick-list {
		height: auto !important;

		.slick-track {
			display: flex;
			align-items: center;
		}
	}

	.quote-carousel-item {
		padding: 0 rem(30);


		.flex-container {
			display: flex;
			flex-direction: column;

			.flex-item {
				display: flex;
				justify-content: center;
				padding-top: rem(20);
				padding-bottom: rem(10);

				&.quote-text {
					font-size: rem(17);
					line-height: lh(30, 17);
					letter-spacing: rem(0.5);
					display: block !important;
				}
			}

			.quote-svg {
				display: block;
				float: left;
				margin: rem(-$spacer * 0.5) auto rem($spacer * 0.5);
				max-width: rem($spacer * 2);

				img {
					min-width: rem($spacer * 2);
					width: rem($spacer * 2);
				}
			}

			.quote-by-author {
				font-size: rem(14);

				strong {
					position: absolute;
					margin-top: 20px;
				}
			}

			.quote-by-image img {
				max-width: rem(155);
				max-height: rem(75);
				width: auto;
				height: auto;
			}
		}
	}

	/*
	.slick-arrow {
		height: rem(35) !important;
		width: rem(35) !importanft;
		position: absolute;

		&.slick-prev {
			left: 0;

			&:hover {

				&::before {
					content: url(./../../../img/arrow-left-white-hoverstate.svg);
				}
			}

			&::before {
				content: url(./../../../img/arrow-left-white-normstate.svg);
			}
		}

		&.slick-next {
			right: 0;

			&:hover {

				&::before {
					content: url(./../../../img/arrow-right-white-hoverstate.svg);
				}
			}

			&::before {
				content: url(./../../../img/arrow-right-white-normstate.svg);
			}
		}
	}
*/
	.slick-arrow {
		height: rem(35) !important;
		width: rem(35) !important;
		position: absolute;

		&.slick-prev,
		&.slick-next {
			top: calc(50% - #{rem(31)/2});
			transform: none;

			&::before {
				background-size: rem(35) rem(35) !important;
				content: "";
				display: block;
				height: rem(35);
			}
		}

		&.slick-prev {
			left: -6% !important;

			&:hover {

				&::before {
					background-image: url(./../../../img/arrow-left-white-hoverstate.svg);
				}
			}

			&::before {
				background: url(./../../../img/arrow-left-white-normstate.svg) no-repeat center center;
			}
		}

		&.slick-next {
			right: -6% !important;

			&:hover {

				&::before {
					background-image: url(./../../../img/arrow-right-white-hoverstate.svg);
				}
			}

			&::before {
				background: url(./../../../img/arrow-right-white-normstate.svg) no-repeat center center;
			}
		}
	}

	.slick-dots {
		bottom: -30px;

		li {
			height: rem(12);
			width: rem(12);
            



			&.slick-active button::before {
				opacity: 1;
				background: #fff;
			}
            
            &:first-child:last-child {
                     display: none;
                }
		}

		li button {

			&::before {
				content: "" !important;
				opacity: 1;
				font-size: rem(10);
				border: rem(1) solid #fff;
				border-radius: rem(25);
				width: rem(12);
				height: rem(12);
				background: transparent;
			}
		}
	}
}

// Tablet only
@media ( min-width: $viewport__md ) and ( max-width: $viewport__lg ) {

	.quote-carousel {
		height: rem(480) !important;
	}

}

@media (min-width: $viewport__md) {

	.quote-carousel {
		height: auto;

		/*
		.quote-carousel-slider {
			max-width: 1080px;
			margin: auto;
		}
*/
		padding-right: rem(20) !important;
		padding-left: rem(20) !important;

		.quote-carousel-slider {
			max-width: rem(1080) !important;
			margin: auto;
		}

		.quote-carousel-item {
			min-height: rem(275);
			padding: rem(55) rem(40) rem(35) rem(40);


			.flex-container {
				flex-direction: row !important;

				&.quote-by {
					justify-content: flex-end;
					align-items: center;

					.quote-by-author {
						padding-right: rem(30);

						strong {
							padding-left: rem(6) !important;
							position: relative;
							margin-top: 0;
						}
					}
				}

				.flex-item {
					padding-bottom: 0;
				}

				.quote-text {
					font-size: rem(17);
					line-height: lh(28, 17);
					letter-spacing: rem(0.5);
					padding-left: rem($spacer * 1.5);
				}

				.quote-svg {
					float: none;
					margin-bottom: $spacer * 0.5;

					img {
						width: rem($spacer * 2);
					}
				}
			}
		}
	}
}

@media (min-width: $viewport__xl) {

	.slick-arrow {

		&.slick-prev {
			left: -6% !important;
		}

		&.slick-next {
			right: -6% !important;
		}
	}
}

/* ------------------------------------------------------------------- */
/* Template Cards */
/* ------------------------------------------------------------------- */

.quote-carousel.template-cards {
	height: auto !important;
/*
	.quote-carousel-slider,
	.slick-list {
		// transform: translateX(-5px);
	}
*/
    
	.quote-carousel-item {
		padding-top: rem(20);
		padding-bottom: rem(20);

		.row {
			background-color: #FFF;
			box-shadow: 0 0 10px rgba( #000, .25 );
			border-radius: rem(12);
			padding: rem(30);
			flex-direction: column;

			.col {
				padding: 0;

				&.quote-text {
					font-family: "Gotham", "Work Sans", sans-serif;
					text-align: center;

					blockquote {
						font-size: rem(19);
						line-height: lh(31, 19);
						padding: 0;
						margin: 0 0 rem(15);

						strong {
							font-weight: 500;
						}
					}

					p.quote-by {
						text-align: center;
						margin: rem(30) 0 0;

						cite {
							font-weight: bold;
							font-style: normal;
						}
					}
				}

				&.quote-by-image {
					display: none;
				}
			}
		}
	}

	.slick-dots {
		li {
			opacity: 0.5;

			&.slick-active {
				opacity: 1;
			}
		}

		li button {

			&::before {
				background: #fff;
			}
		}
	}

	.slick-arrow {

		&.slick-prev,
		&.slick-next {
			&:before {
				opacity: 1;
			}
		}

		&.slick-prev {
			left: -(rem(30)) !important;

			&:before {
				background-image: url(./../../../img/arrow-thin-left-white.svg);
			}
		}

		&.slick-next {
			right: -(rem(30)) !important;

			&:before {
				background-image: url(./../../../img/arrow-thin-right-white.svg);
			}
		}
	}
}

/* ------------------------------------------------------------------- */
/* Template REDESIGN */
/* ------------------------------------------------------------------- */

.quote-carousel.template-redesign {
	height: auto !important;
/*    padding-top: rem(130);
    padding-bottom:rem(230);*/
            
    .slick-list {
			overflow: visible !important;
		}
	.quote-carousel-item {
        display:flex;
        align-items: stretch;
        padding: rem(44) rem(30);
        background: $color__white;
        border-radius: 15px;
        margin-left: rem(50);
        margin-right: rem(50);
        font-family: "Inter", "Work Sans", sans-serif;
        color:$color__text-main;
        min-height: rem(275);
        
        &.image-top {
                padding: rem(44) rem(30);
                flex-direction: column-reverse;
                justify-content: center;
            
            .quote-by-image {
                    border-left: 0 solid #d4dadb;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 rem(25) rem(25);
                    margin: 0 auto;
                    max-width:50%;
                
            }
        }


        .quote-main-area {
            
            padding:0 rem(25);
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            
            .quote-text {
					text-align: left;
                    font-size: rem(18);
                    line-height:rem(28);
                     padding-left: 0;

				}
                .quote-by-author {
						text-align: right;
						margin: rem(30) 0 0;
                    
                             font-size: rem(16);
                            line-height:rem(24);    
					        font-weight: bold;

					strong {
						font-weight: normal;
					}

                    
                    &::before {
						content: "- "
					}
					}
        }
        
        .quote-by-image {
            
            border-left:1px solid $color__darkgray;
            padding:0 rem(25);
            display: inline-flex;
            align-items: center;
            min-width: 250px;
            

					img {
                        width: 100%!important;
                        height: auto!important;
                        max-width: 100%!important;
                        max-height: 100%!important;
                        //min-width:200px!important;
                        
					}
            
            &.image-circle{
                img {
						border-radius: rem(200);
                        
					}
                
            }
				}

			}
		

	.slick-arrow {
			width: rem(60) !important;
			height: rem(60) !important;
			border-radius: 30px;
			background: $color__purple;
			z-index: 100;
            display:block;
	
			&.slick-prev,
			&.slick-next {
				top: calc(50% - #{rem(60)/2});
				// transform: none;
	
				&::before {
					background-size: rem(28) rem(28) !important;
					// content: "";
					// display: block;
					height: rem(60);
				}
			}
	
			&.slick-prev {
				left: 2% !important;
	
				&:hover {
					&::before {
						opacity: 1;
					}
				}
				&::before {
					background: url(./../../../img/arrow-left-white-hoverstate.svg) no-repeat rem(13) center;
				}
			}
			
			&.slick-next {
				right: 2% !important;
	
				&:hover {
					&::before {
						opacity: 1;
					}
				}
				&::before {
					background: url(./../../../img/arrow-right-white-hoverstate.svg) no-repeat rem(18) center;
					opacity: 0.8;
				}
			}
	
		}

		.slick-dots {
			bottom: rem(-45);

			li {
				width: rem(15);
				height: rem(15);
				margin: 0 rem(7);

				&.slick-active {
					button {
						&::before {
							background-color: $color__purple;
						}
					}
					opacity: 1;
				}
                
                &:first-child:last-child {
                     display: none;
                }
			}
	
			li button {
	
				&::before {
					border: none;
					width: rem(15);
					height: rem(15);
					background-color: $color__white;
				}
			}
		}


}

/* ------------------------------------------------------------------- */
/* Template REDESIGN WITH STAT */
/* ------------------------------------------------------------------- */

.quote-carousel.template-redesign-withStat {
	height: auto !important;
/*    padding-top: rem(130);
    padding-bottom:rem(230);*/
            
    .slick-list {
			overflow: visible !important;
		}
	.quote-carousel-item {
        display:flex;
        align-items: stretch;
        padding: 0;
        background: $color__white;
        border-radius: 15px;
        margin-left: rem(50);
        margin-right: rem(50);
        font-family: "Inter", "Work Sans", sans-serif;
        color:$color__text-main;
        min-height: rem(275);
        flex-direction: row;
        justify-content: center;

        .quote-main-area {
            
            padding: rem(30) rem(50);
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            
            .quote-text {
					text-align: left;
                    font-size: rem(18);
                    line-height:rem(28);
                     padding-left: 0;
                font-weight:400;

				}
                .quote-by-author {
						text-align: right;
						margin: rem(30) 0 0;
                    
                             font-size: rem(16);
                            line-height:rem(24);    
					        font-weight: bold;

					strong {
						font-weight: normal;
					}

                    
                    &::before {
						content: "- "
					}
					}
        }
        
        .quote-by-image {
            
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 rem(25) rem(40);
            margin: 0 auto;
            /*max-width:50%;*/

					img {
						/*border-radius: rem(200);*/
                        width: 100%!important;
                        height: auto!important;
                        max-width: 100%!important;
                        max-height: 100%!important;
                        //min-width:200px!important;
                        
					}
				}
        
        .quote-stat-area {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
            background-color: $color__lightgray;
            padding: rem(30) rem(50);
            text-align:center;
            font-family: "Gotham", "Work Sans", sans-serif;
            font-size:rem(18);
            line-height:rem(25);
            border-radius: 0px 15px 15px 0px;
            min-width: 300px;
            
            
            div {
                padding: rem(20) 0;
                
                &:first-child {
                    padding-top:0;
                }
                
                &:last-child {
                    padding-bottom:0;
                }
            }
            
            .separator {
                background: #ccc;
                width: 100%;
                height: 1px!important;
                padding: 0px;
            }
            
        }

			}
		

	.slick-arrow {
			width: rem(60) !important;
			height: rem(60) !important;
			border-radius: 30px;
			background: $color__purple;
			z-index: 100;
            display:block;
	
			&.slick-prev,
			&.slick-next {
				top: calc(50% - #{rem(60)/2});
				// transform: none;
	
				&::before {
					background-size: rem(28) rem(28) !important;
					// content: "";
					// display: block;
					height: rem(60);
				}
			}
	
			&.slick-prev {
				left: 2% !important;
	
				&:hover {
					&::before {
						opacity: 1;
					}
				}
				&::before {
					background: url(./../../../img/arrow-left-white-hoverstate.svg) no-repeat rem(13) center;
				}
			}
			
			&.slick-next {
				right: 2% !important;
	
				&:hover {
					&::before {
						opacity: 1;
					}
				}
				&::before {
					background: url(./../../../img/arrow-right-white-hoverstate.svg) no-repeat rem(18) center;
					opacity: 0.8;
				}
			}
	
		}

		.slick-dots {
			bottom: rem(-45);

			li {
				width: rem(15);
				height: rem(15);
				margin: 0 rem(7);

				&.slick-active {
					button {
						&::before {
							background-color: $color__purple;
						}
					}
					opacity: 1;
				}
                
                &:first-child:last-child {
                     display: none;
                }
			}
	
			li button {
	
				&::before {
					border: none;
					width: rem(15);
					height: rem(15);
					background-color: $color__white;
				}
			}
		}


}

@media (min-width: $viewport__sm ) {

	.quote-carousel.template-cards {

		.quote-carousel-item {
		
			.row {
				
				.col {
	
					&.quote-text {
						text-align: center;

						blockquote {
							margin-bottom: rem(25);
						}
	
						p.quote-by {
							text-align: center;
						}
					}

					&.quote-by-image {
						display: block;
						text-align: center;
						flex-basis: 100%;
						padding: rem(30) 0;

						img {
							margin: 0 auto;
							max-width: rem(250);
							height: auto;
						}
					}
				}
			}	
		}
	}
}

@media (min-width: $viewport__lg) {

	.quote-carousel.template-cards {

		.quote-carousel-slider {
			max-width: 1100px !important;
		}	
		
		.quote-carousel-item {

			.row {
				flex-direction: row;

				.col {

					&.quote-text {
						padding: rem(20) rem(40);
						padding-left: rem(5);
						
						blockquote {
							font-size: rem(19);
							line-height: lh(31, 19);
							padding: 0;
							margin: 0 0 rem(15);
							text-align: left;

							strong {
								font-weight: 500;
							}
						}

						p.quote-by {
							text-align: right;

							cite {
								font-weight: bold;
								font-style: normal;
							}
						}
					}

					&.quote-by-image {
						flex-basis: rem(250);
						flex-grow: 0;
						border-left: 2px solid #E4E9EB;
						display: flex;
						align-items: center;
						padding-left: rem(30);

						img {
							max-width: 100%;
							height: auto;
						}
					}
				}
			}
		}
	}
}

/* Careers page Redesign 2022 Styles */
//.careers-carousel-container {
//	overflow: hidden;
//
//	.quote-carousel.careers-carousel {
//		padding-top: rem(130);
//	
//		.slick-list {
//			overflow: visible !important;
//		}
//	
//		.quote-carousel-item {
//			position: relative;
//			min-height: rem(250);
//			padding-top: rem(44);
//			padding-bottom: 0;
//			background: $color__white;
//			border-radius: 15px;
//			margin-left: rem(50);
//			margin-right: rem(50);
//			
//			.quote-main-area,
//			.quote-by {
//				width: 70%;
//			}
//
//			.quote-by {
//				text-align: right;
//				margin-bottom: rem(30);
//
//				.quote-by-author {
//					display: inline-block;
//					font-weight: bold;
//					font-size: rem(16);
//					padding-right: 0;
//
//
//					strong {
//						font-weight: normal;
//					}
//
//					&::before {
//						content: "- "
//					}
//				}
//				.quote-by-image {
//					// display: inline-block;
//					position: absolute;
//					top: rem(30);
//					right: rem(60);
//					padding-left: rem(30);
//    			border-left: 2px solid $color__lightgray;
//
//					img {
//						max-width: rem(190);
//						max-height: rem(190);
//						border-radius: rem(200);
//					}
//				}
//			}
//
//			.flex-container {
//				.flex-item {
//					padding-top: 0;
//					&.quote-text {
//						margin-bottom: rem(15);
//					}
//				}
//
//				.quote-svg {
//					display: none;
//				}
//			}
//		}
//	
//		.slick-arrow {
//			width: rem(60) !important;
//			height: rem(60) !important;
//			border-radius: 30px;
//			background: $color__purple;
//			z-index: 100;
//	
//			&.slick-prev,
//			&.slick-next {
//				top: calc(50% - #{rem(60)/2});
//				// transform: none;
//	
//				&::before {
//					background-size: rem(28) rem(28) !important;
//					// content: "";
//					// display: block;
//					height: rem(60);
//				}
//			}
//	
//			&.slick-prev {
//				left: 2% !important;
//	
//				&:hover {
//					&::before {
//						opacity: 1;
//					}
//				}
//				&::before {
//					background: url(./../../../img/arrow-left-white-hoverstate.svg) no-repeat rem(13) center;
//				}
//			}
//			
//			&.slick-next {
//				right: 2% !important;
//	
//				&:hover {
//					&::before {
//						opacity: 1;
//					}
//				}
//				&::before {
//					background: url(./../../../img/arrow-right-white-hoverstate.svg) no-repeat rem(18) center;
//					opacity: 0.8;
//				}
//			}
//	
//		}
//
//		.slick-dots {
//			bottom: rem(-45);
//
//			li {
//				width: rem(15);
//				height: rem(15);
//				margin: 0 rem(7);
//
//				&.slick-active {
//					button {
//						&::before {
//							background-color: $color__purple;
//						}
//					}
//					opacity: 1;
//				}
//			}
//	
//			li button {
//	
//				&::before {
//					border: none;
//					width: rem(15);
//					height: rem(15);
//					background-color: $color__white;
//				}
//			}
//		}
//
//	}	
//
//}

@media (min-width: $viewport__lg) {
	.careers-carousel-container {
		.quote-carousel.careers-carousel {
			padding-bottom: rem(230);
		}
	}
}


@media (max-width: $viewport__lg) {
    /* ------------------------------------------------------------------- */
/* Template REDESIGN */
/* ------------------------------------------------------------------- */

.quote-carousel.template-redesign {
	height: auto !important;
/*    padding-top: rem(66);
    padding-bottom:rem(166);*/
    
    .slick-list {
			overflow: hidden !important;
		}
            

	.quote-carousel-item {
        padding: rem(44) 0;
        flex-direction: column-reverse!important;
        justify-content: center!important;
        
         &.image-top {
            
            .quote-by-image {
                    max-width:50%;
                
            }
        }


        .quote-main-area {
            
            padding:0 rem(10)!important;
            
            
            .quote-text {
					text-align: center!important;


				}
                .quote-by-author {
						text-align: center!important;
  
					}
        }
        
        .quote-by-image {
            
            border-left:0px solid $color__darkgray;
            padding:0 rem(25);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-bottom:rem(40);

					img {
                        max-width: 50%!important;
                        
					}
				}

			}
		

	.slick-arrow {
			display:none!important;
	

	
		}

		.slick-dots {
			bottom: rem(-45);

			li {
				width: rem(15);
				height: rem(15);
				margin: 0 rem(7);

				&.slick-active {
					button {
						&::before {
							background-color: $color__purple;
						}
					}
					opacity: 1;
				}
                
                &:first-child:last-child {
                     display: none;
                }
			}
	
			li button {
	
				&::before {
					border: none;
					width: rem(15);
					height: rem(15);
					background-color: $color__white;
				}
			}
		}


}
    
	/*.careers-carousel-container {
		.quote-carousel.careers-carousel {
			height: auto !important;
			padding-top: rem(90);
			padding-right: rem(70) !important;
			padding-left: rem(70) !important;	
			padding-bottom: rem(180) !important;

			.quote-carousel-item {
				margin-left: rem(30);
				margin-right: rem(30);	

				.quote-main-area,
				.quote-by {
					text-align: center;
					width: 100%;
					margin-bottom: rem(40);
				}	

				.quote-main-area {
					padding-top: rem(220);
					margin-bottom: rem(30);
				}

				.quote-by {
					justify-content: center;
					text-align: center;
					
					.quote-by-author {
						// text-align: center;

						strong {
							position: static;
							margin: 0;
						}
					}	

					.quote-by-image {
						position: absolute;
						top: rem(40);
						right: calc(50% - #{rem(190)/2});
						border: none;
						padding: 0;
					}
				}
	
				.flex-container {
					.flex-item.quote-text {
						font-size: rem(18);
					}
				}
			}

			.slick-arrow {
				&.slick-prev {
					left: 0% !important;
				}
				
				&.slick-next {
					right: 0% !important;
				}
			}

		}
	}*/
    
    
/* ------------------------------------------------------------------- */
/* Template REDESIGN WITH STAT */
/* ------------------------------------------------------------------- */

.quote-carousel.template-redesign-withStat {
/*    padding-top: rem(70);
    padding-bottom:rem(70);*/

    .slick-list {
			overflow: hidden !important;
		}

	.quote-carousel-item {

        flex-direction: column;

        .quote-main-area {
            padding: rem(30) rem(20)!important;
            
            .quote-text {
					text-align: center!important;


				}
                .quote-by-author {
						text-align: center!important;
  
					}
        }
        

        
        .quote-stat-area {
            font-size:rem(16)!important;
            line-height:rem(24)!important;
            border-radius: 0px 0px 15px 15px!important;
            padding: rem(30) rem(20)!important;
            min-width: 100px;
            
        }

			}
		

		.slick-arrow {
			display:none!important;
	
		}

		.slick-dots {
			bottom: rem(-45);

			li {
				width: rem(15);
				height: rem(15);
				margin: 0 rem(7);

				&.slick-active {
					button {
						&::before {
							background-color: $color__purple;
						}
					}
					opacity: 1;
				}
                
                &:first-child:last-child {
                     display: none;
                }
			}
	
			li button {
	
				&::before {
					border: none;
					width: rem(15);
					height: rem(15);
					background-color: $color__white;
				}
			}
		}


}
}


@media (max-width: $viewport__sm) {
        /* ------------------------------------------------------------------- */
/* Template REDESIGN */
/* ------------------------------------------------------------------- */
    



.quote-carousel.template-redesign, .quote-carousel.template-redesign-withStat {
/*    padding-top: rem(70);
    padding-bottom:rem(70);*/
    
                
	.quote-carousel-item {
        margin-left: rem(30);
        margin-right: rem(30);
        
        .quote-main-area{

            
            .quote-text {
                font-size:rem(16);
                line-height:rem(22);
                
            }
            
            .quote-by-author {
                font-size:rem(14);
                line-height:rem(20);
                
            }
        }
    }
            
}
	.careers-carousel-container {
		.quote-carousel.careers-carousel {
			padding-right: 0 !important;
			padding-left: 0 !important;	
			padding-top: rem(70);
			padding-bottom: rem(80) !important;

			.quote-carousel-item {
				
				.quote-main-area {
					margin-bottom: rem(10);
				}

				.quote-by {

						margin-bottom: rem(20);
	
					.quote-by-image {

						img {
							max-width: rem(190) !important;
							max-height: rem(190) !important;
							width: auto !important;
							height: auto !important;
						}
					}
				}
	
			}

			.slick-arrow {
				display: none !important;
			}
	
		}

		.gb-shapes {
			display: none;
		}
	}
}


/* Flexbox */