.code-examples__wrapper {
	position: relative;
	overflow: hidden;
}

.code-examples__example {
	margin:  24px 0;
	width: 100%;
	max-width: 100%;
	position: relative;
}

.no-js .code-examples__example + .code-examples__example {
	border-top: 1px solid #dee2e6;
	padding-top: 20px;
}

.code-examples__notes-block {
	position: relative;
	/* font-size should be the same as .vs-code .highlight */
	font-size: 21px;
	z-index: 2;
}

.code-examples__note-wrapper {
	display: none;
}

.code-examples__note {
	font-size: 14px;	
	position: relative;
	border-top: 1px solid rgba(0, 0, 0, .2);
	padding: 5px 35px 0 0;
	position: absolute;
	left: 0;
	right: -19px;
	opacity: 1;
  	margin-top: 55px;
	transition: opacity .15s
}
.code-examples__note:after {
	content: '';
	width: 5px;
	height: 5px;
	position: absolute;
	right: 0;
	top: -3px;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, .7);
}
.code-examples__note.js-code-examples-highlighted {
	border-top: 1px solid rgba(0, 0, 0, .4);
}
.code-examples__note.js-code-examples-highlighted:after {
	background-color: rgba(255, 255, 255, .85);
}
.code-examples__example--blur .code-examples__note:not(.js-code-examples-highlighted) {
	opacity: .3;
}

.code-examples__title {
	display: none;
	font-size: 24px;
}
.no-js .code-examples__title {
	display: block;
	margin-bottom: 1em;
}

.code-examples__cta-wrapper {
	font-size: 0;
	transition: opacity .3s;
}

.js .code-examples__cta-wrapper {
	opacity: 0;
	visibility: hidden;
}

.js .code-examples__example:not(.code-examples__example--active) .code-examples__cta-wrapper {
	transition-property: none !important;
}

.js .code-examples__example--active .code-examples__cta-wrapper {
	opacity: 1;
	visibility: visible;
}

.code-examples__cta {
	border: 1px solid black !important;
	padding: 12px 16px 13px;
	font-family: 'Arial Black', 'Arial', sans-serif;
	font-weight: 900;
	letter-spacing: .2em;
	font-size: 14px;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
	margin-top: 1rem;
}
.code-examples__cta:before {
	content: '';
	position: absolute;
	left: 20px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.95);
	opacity: 0;
	transition: all .3s;
}

.code-examples__cta:hover {
	color: #e7ff9d !important;
}
.code-examples__cta:hover:before {
	transform: scale(50);
	opacity: 1;
}

.code-examples__cta span {
	position: relative;
	z-index: 1;
}
.code-examples__cta:active {
	transform: translateY(2px);
	transition: all .1s;
}

.code-examples__result-block {
	display: none;
	cursor: default;
	user-select:  none;
	align-self: flex-start;
	border: 1px solid rgba(0, 0, 0, .2);
	overflow: hidden;
}
@keyframes code-examples__result-block-animation {
	0% { background-color: rgba(255, 255, 255, .2); }
	50% { background-color: rgba(255, 255, 255, .4); }
}

.code-examples__result-block-wrapper {
	background-color: white;
	padding: 7px;
}

.code-examples__result-block [data-example-highlight] {
	position: relative;
}
.code-examples__result-block [data-example-highlight]:before {
	background-color: rgba(255, 224, 0, .5);
	border: 1px dotted black;
	z-index: -1;
	content: '';
	position: absolute;
	left: -3px;
	right: -3px;
	top: -3px;
	bottom: -3px;
	opacity: 0;
}
.code-examples__result-block [data-example-highlight].js-code-examples-highlighted:before {
	opacity: 1;
}

.code-examples__ps figure {
	border-left: 1px solid rgba(0, 0, 0, 0.3);
	padding-left: 21px;
	margin: 0;
}

.code-examples__ps blockquote {
	border-left: none;
	padding: 0;
	font-weight: 300;
	color: black;
}

.code-examples__ps blockquote:before {
	content: '';
	display: block;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='none' viewBox='0 0 21 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.3984 12.703c0 1-0.40625 1.875-1.2188 2.625-0.79688 0.75-1.7422 1.125-2.8359 1.125-1.7188 0-3.0391-0.5703-3.9609-1.7109-0.92187-1.1406-1.3828-2.7188-1.3828-4.7344 0-1.875 0.78906-3.7656 2.3672-5.6719 1.5938-1.9062 3.5078-3.3516 5.7422-4.3359l1.0312 1.6641c-1.7656 0.85938-3.1484 1.8594-4.1484 3-1 1.1406-1.5781 2.5234-1.7344 4.1484h1.3125c0.96875 0 1.7578 0.10938 2.3672 0.32812 0.60938 0.21876 1.1016 0.52344 1.4766 0.91408 0.35938 0.375 0.60938 0.7891 0.75 1.2422 0.15625 0.4531 0.23438 0.9219 0.23438 1.4062zm11.555 0c0 1-0.4062 1.875-1.2187 2.625-0.7969 0.75-1.7422 1.125-2.836 1.125-1.7187 0-3.039-0.5703-3.9609-1.7109s-1.3828-2.7188-1.3828-4.7344c0-1.875 0.7891-3.7656 2.3672-5.6719 1.5937-1.9062 3.5078-3.3516 5.7422-4.3359l1.0312 1.6641c-1.7656 0.85938-3.1484 1.8594-4.1484 3-1 1.1406-1.5781 2.5234-1.7344 4.1484h1.3125c0.9688 0 1.7578 0.10938 2.3672 0.32812 0.6094 0.21876 1.1016 0.52344 1.4766 0.91408 0.3593 0.375 0.6093 0.7891 0.75 1.2422 0.1562 0.4531 0.2343 0.9219 0.2343 1.4062z' fill='%233C8C20' fill-opacity='.65'/%3E%3C/svg%3E%0A");
	width: 21px;
	height: 17px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-bottom: 18px;
}

.code-examples__ps cite {
	font-size: 12px;
	letter-spacing: 0.155em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.73);
	font-style: normal;
}

.code-examples__code-block {
	overflow: hidden;
}

.code-examples__code-block [data-example-highlight] {
	background-color: rgba(216, 255, 255, 0);
	transition: background-color .15s;
	padding: 2px 0;
}

.code-examples__code-block .js-code-examples-highlighted {
	background-color: rgba(255, 255, 255, 0.2);
}

.js .code-examples__example {
	position: absolute;
	z-index: 1;
	visibility: hidden;
}
.js .code-examples__example--active {
	visibility: visible;
	z-index: 2;
}
.js .code-examples__example--active[data-example-id="api-example"],
.js .code-examples__example--active[id="api-example"] {
	z-index: 3; /* to cover .code-examples__ps */
}
.js .code-examples__examples-container:not([style]) .code-examples__example--active {
	position: relative;
}

.js .code-examples__example--active .code-examples__note-wrapper {
	opacity: 1;
	transition: all .15s;
	height: auto;
}

.js .code-examples__title {
	transform: scaleY(.7);
	opacity: 0;
	transform-origin: top left;
	transition: all .2s;
}
.code-examples__example--active .code-examples__title {
	transform: scaleY(1);
	opacity: 1;
	transition: all .2s .4s ;
}

@media (max-width: 759px) {
	.js .code-examples__example {
		margin: 0 0 24px;
	}
	.code-examples.wide-container,
	.code-examples.container {
		padding: 0;
	}
	.code-examples__cta-wrapper,
	.code-examples__title,
	.code-examples__ps {
		margin-left: 15px;
		margin-right: 15px;
	}
}

@media (min-width: 760px) {
	.code-examples__code-block {
		margin:  0;
		border-radius: 10px;
	}

	.code-examples__examples-container {
		transition: height .3s;
	}
}


@media (min-width: 900px) {

	.code-examples__example {
		display: flex;
		margin: 56px 0;
	}

	.code-examples__notes-block {
		flex: 0 0 280px;
	}

	.code-examples__title {
		display: block;
	}

	.code-examples__note-wrapper {
		display: block;
	}

	.js .code-examples__note-wrapper {
		opacity: 0;
		transition: none;
		height: 0;
		overflow: hidden;
	}

	.code-examples__cta-wrapper {
		bottom: 0;
		position: absolute;
		z-index: 3;
	}

	.code-examples__code-block {
		flex:  1 1 auto;
		min-width: 1px;
		z-index: 1;
		margin: 0;
	}

	.no-js .code-examples__example + .code-examples__example {
		padding-top: 56px;
	}

	.code-examples__ps {
		margin-left: 280px;
	}
}

@media (min-width: 1200px) {
	.code-examples__result-block {
		flex: 0 0 270px;
		display: block;
		margin-left: 30px;
	}

	.js .code-examples__result-block-wrapper {
		transform: skewX(-3deg) translateX(-5px);
		transform-origin: left top;
		opacity: 0;
		transition: all .3s;
		background-color: transparent;
	}

	.js .code-examples__example:not(.code-examples__example--active) .code-examples__result-block-wrapper {
		transition: all .2s !important;
	}

	.js .code-examples__example--active .code-examples__result-block-wrapper {
		opacity: 1;
		transform: translateX(0) skewX(0) scaleX(1);
		background-color: white;
	}

	.code-examples__ps {
		position: absolute;
		right: 0;
		top: 376px;
		width: 270px;
		z-index: 2;
	}
}


@media (min-width: 1360px) {
	.code-examples__notes-block {
		flex: 0 0 290px;
	}

	.code-examples__result-block {
		flex: 0 0 290px;
	}

	.code-examples__ps {
		width: 290px;
	}
}