.text-with{


	

	
	.quote{
		.image-wrapper{
			border-radius: 50%;
			overflow: hidden;
			font-size: 0;

		}
		.text-wrapper{
			font-size: 16px;
			position: relative;
			&:before{content: ""; z-index: -1; top: -5px; left: 10px; width: 36px; height: 27px; 
				display: block; position: absolute; background: yellow; 
				background:url('assets/graphics/quote-symbol.svg');
			}
		}
	}
		


	.screenshot-round-wrapper{
		
		overflow: hidden;
		position: relative;
	

		&:before{
			content: "";
			background:url('assets/graphics/round-mask.svg');
			display: block;
			width: 100%;
			position: relative;
			padding-bottom: 100%;
			z-index: 1;
		}


		.image-wrapper{
			background:var(--pd-light-gray);
			width: calc(100% - 1px);
			height:100%;
			position: absolute;
			top:0; left:0;
			border-radius: 50%;	
		}



		.caption{			
			position: absolute;
			bottom:0; right:0;
			max-height: calc(100% - 20px);
			max-width: calc(100% - 20px);
			box-shadow: rgba(black,0.05) -3px -2px 5px;
		}

		.video{
			z-index: 1;
		}


		&.left{
			.caption{left:0; box-shadow: rgba(black,0.05) 3px -2px 5px; }
			&:before{ transform: rotate(90deg) }
		}
	}
	
}

.has-video.text-with-bulletlist, .screenshot-big-wrapper{
	.browser-window{
		width: 720px;
	}
	
	video,img{ max-width: 720px;}

}