.lazyframe{
	position:          relative;
	background-color:  currentColor;
	background-repeat: no-repeat;
	background-size:   cover
}


.lazyframe__title{
	position: absolute;
	top:      0;
	left:     0;
	right:    0;
	padding:  15px 17px;
	z-index:  3
}


.lazyframe__title:after{
	z-index: -1
}


.lazyframe:hover{
	cursor: pointer
}


.lazyframe:before{
	display:     block;
	content:     "";
	width:       100%;
	padding-top: 100%
}


.lazyframe[data-ratio="16:9"]:before{
	padding-top: 56.25%
}


.lazyframe[data-ratio="4:3"]:before{
	padding-top: 75%
}


.lazyframe[data-ratio="1:1"]:before{
	padding-top: 100%
}


.lazyframe iframe{
	position: absolute;
	top:      0;
	left:     0;
	right:    0;
	bottom:   0;
	z-index:  5;
	width:    100%;
	height:   100%
}


.lazyframe[data-vendor="youtube"]{
	background-color: #E52D27;
	font-family:      Roboto, Arial, Helvetica, sans-serif
}


.lazyframe[data-vendor="youtube"] .lazyframe__title{
	color:                       #EEEEEE;
	font-family:                 Roboto, Arial, Helvetica, sans-serif;
	font-size:                   18px;
	text-shadow:                 rgba(0, 0, 0, 0.498039) 0px 0px 2px;
	-webkit-font-smoothing:      antialiased;
	-webkit-tap-highlight-color: transparent;
	transition:                  color 0.1s cubic-bezier(0.4, 0, 1, 1)
}


.lazyframe[data-vendor="youtube"] .lazyframe__title:hover{
	color: #FFFFFF
}


.lazyframe[data-vendor="youtube"] .lazyframe__title:before{
	content:                     '';
	display:                     block;
	background:                  linear-gradient(rgba(0, 0, 0, 0.2), transparent);
	height:                      98px;
	width:                       100%;
	pointer-events:              none;
	position:                    absolute;
	top:                         0;
	left:                        0;
	right:                       0;
	z-index:                     -1;
	-webkit-tap-highlight-color: transparent
}


.lazyframe[data-vendor="youtube"]:before{
	padding-top: 56.25%
}


.lazyframe[data-vendor="youtube"][data-ratio="16:9"]:before{
	padding-top: 56.25%
}


.lazyframe[data-vendor="youtube"][data-ratio="4:3"]:before{
	padding-top: 75%
}


.lazyframe[data-vendor="youtube"][data-ratio="1:1"]:before{
	padding-top: 100%
}


.lazyframe[data-vendor="youtube"]:after{
	content:             '';
	position:            absolute;
	left:                50%;
	top:                 50%;
	width:               68px;
	height:              48px;
	margin-left:         -34px;
	margin-top:          -24px;
	background-image:    url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjIzFmMWYxZiIvPjxwYXRoIGQ9Ik0yMDMuMiAzNDRWMTg1LjVMMzQ4IDI2NC44IDIwMy4yIDM0NHoiIGZpbGw9IiNGRUZERkQiLz48L3N2Zz4=");
	background-position: center center;
	background-size:     100%;
	background-repeat:   no-repeat;
	opacity:             .81;
	border:              none;
	z-index:             4
}


.lazyframe[data-vendor="youtube"]:hover:after{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yIDM0NFYxODUuNUwzNDggMjY0LjggMjAzLjIgMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvc3ZnPg==");
	opacity:          1
}


.lazyframe[data-vendor="vimeo"]{
	background-color: #00ADEF
}


.lazyframe[data-vendor="vimeo"] .lazyframe__title{
	font-family:                 "Helvetica Neue", Helvetica, Arial;
	color:                       #00ADEF;
	font-size:                   20px;
	font-weight:                 bold;
	text-rendering:              optimizeLegibility;
	user-select:                 none;
	-webkit-font-smoothing:      auto;
	-webkit-tap-highlight-color: transparent;
	background-color:            rgba(0, 0, 0, 0.5)
}


.lazyframe[data-vendor="vimeo"]:before{
	padding-top: 48.25%
}


.lazyframe[data-vendor="vimeo"][data-ratio="16:9"]:before{
	padding-top: 56.25%
}


.lazyframe[data-vendor="vimeo"][data-ratio="4:3"]:before{
	padding-top: 75%
}


.lazyframe[data-vendor="vimeo"][data-ratio="1:1"]:before{
	padding-top: 100%
}


.lazyframe[data-vendor="vimeo"]:after{
	content:             '';
	height:              40px;
	width:               65px;
	display:             block;
	position:            absolute;
	bottom:              10px;
	left:                10px;
	z-index:             3;
	background-color:    rgba(0, 0, 0, 0.5);
	background-image:    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYmFzZVByb2ZpbGU9InRpbnkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuNzY1IDE2Ljg5bDguNDctNC44OS04LjQ3LTQuODkiLz48L3N2Zz4=");
	background-position: center center;
	background-size:     100% 100%;
	background-repeat:   no-repeat;
	border-radius:       5px;
	position:            relative
}


.lazyframe[data-vendor="vimeo"]:hover:after{
	background-color: #00ADEF
}


.lazyframe[data-vendor="vine"]{
	background-color: #00BF8F
}


.lazyframe[data-vendor="vine"] .lazyframe__title{
	color:       #FFFFFF;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:   14px;
	line-height: 16px;
	white-space: nowrap;
	z-index:     3;
	positon:     relative
}


.lazyframe[data-vendor="vine"] .lazyframe__title:after{
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	right:      0;
	z-index:    -1;
	height:     115px;
	padding:    24px 70px 24px 24px;
	background: linear-gradient(to top, rgba(23, 23, 23, 0) 0, rgba(23, 23, 23, 0.7) 100%);
	filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3171717", endColorstr="#00171717", GradientType=0)
}


.lazyframe[data-vendor="vine"]:before{
	padding-top: 100%
}


.lazyframe[data-vendor="vine"][data-ratio="16:9"]:before{
	padding-top: 56.25%
}


.lazyframe[data-vendor="vine"][data-ratio="4:3"]:before{
	padding-top: 75%
}


.lazyframe[data-vendor="vine"][data-ratio="1:1"]:before{
	padding-top: 100%
}


.lazyframe[data-vendor="vine"]:after{
	content:           '';
	width:             60px;
	height:            60px;
	position:          absolute;
	left:              50%;
	top:               50%;
	z-index:           4;
	background-image:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiB2aWV3Qm94PSIwIDAgMTM2IDEzNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTU2IDQ0Yy0uNyAwLTEuNC4yLTIgLjUtMS4yLjgtMiAyLTIgMy41djQwYzAgMS40LjggMi44IDIgMy41LjYuMyAxLjMuNSAyIC41czEuNC0uMiAyLS41bDM0LjYtMjBjMS4zLS43IDItMiAyLTMuNSAwLTEuNC0uNy0yLjgtMi0zLjVMNTggNDQuNWMtLjYtLjMtMS4zLS41LTItLjV6Ii8+PC9zdmc+");
	background-color:  rgba(0, 0, 0, 0.5);
	background-size:   cover;
	background-repeat: no-repeat;
	margin-top:        -30px;
	margin-left:       -30px;
	border-radius:     50%
}


.lazyframe[data-vendor="vine"]:hover:after{
	background-color: rgba(0, 0, 0, 0.75)
}