@import "var";

ul {
	list-style: none !important;
}

.reveal h1 {
	text-shadow: 0 2px 4px rgba(0,0,0,.5),
				 0 -1px 3px rgba(0,0,0,.5);
}

.reveal pre {
	font-size: 0.7em !important;
	box-sizing: border-box;
}

.slide-background {
	background-position: center !important;
}

.mainpage .slide-background {
	background: url(../assets/i/mainpage-bg.jpg);
	background-repeat: no-repeat;
}

.mainpage h1 {
	color: #fff !important;
}

.mainpage h3 {
	margin-top: 30px !important;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,.5),
				 0 -1px 1px rgba(0,0,0,.5);
}

.mainpage body::before {
	content: "";
	position: absolute;
	right: 5%;
	top: 10%;
	z-index: 1;
	width: 288px;
	height: 108px;
	background: url(../assets/i/epam-logo_white.png) center no-repeat;
	background-size: cover;
}
.mainpage body::after {
	content: "17 November, 2021";
	position: absolute;
	right: 7%;
	bottom: 5%;
	font-family: "Oswald Regular";
	font-size: 1.25em;
	color: #fff;
	white-space: nowrap;
}

.intro h3 {
	color: var(--primary);
}

.table-code-example pre {
	font-size: .5em !important;
}

.old-site .slide-background {
	background: url(../assets/i/oldest-site.jpg);
	background-repeat: no-repeat;
}

.mother-of-god .slide-background {
	background: url(../assets/i/mother-of-god.png);
	background-repeat: no-repeat;
	background-size: auto 90%;
}

.chuck-norris-approves .slide-background {
	background: url(../assets/i/norris.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.spec-support .slide-background {
	background-color: #40382b !important;
	background-repeat: no-repeat !important;
}

.tables-for-tables-once-again h2 {
	color: #fff !important;
}

.tables-for-tables-once-again .slide-background {
	background: url(../assets/i/table-data.png);
}

.tables-for-tables-once-again .slide-background::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.7);
}

.tables-for-tables-once-again .progress span {
	background: #fff;
}

.tables-for-tables-once-again .controls {
	z-index: 200;
}

.tables-for-tables-once-again .controls .navigate-left {
	border-right-color: #fff !important;
	opacity: 1;
}

.tables-for-tables-once-again .controls .navigate-right {
	border-left-color: #fff !important;
	opacity: 1;
}

.div-markup-example pre {
	font-size: .5em !important;
}

.conclusion {
	margin-top: 2.5em !important;
}
.conclusion div {
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
}

.conclusion-good div {
	color: var(--secondary);
}

.conclusion-bad div {
	color: var(--attention-hover);
}

.float-question strong {
	color: var(--primary);
}

.entities-container {
	margin-top: 2em !important;
}

.entities-container div {
	text-align: left;
}

.attrs-container div:last-child {
	margin-top: 1em !important;
}

.evolution-of-clear h3 span {
	color: var(--primary);
}

.oops .container,
.oops-fix .container {
	box-sizing: border-box;
	width: 90%;
	margin: 0 auto 120px !important;
	padding: 4px;
	border: 2px solid black;
	background: var(--secondary);
}

.oops-fix .container {
	margin-bottom: 40px !important;
}

.oops-fix .container::after {
	content: "";
	display: table;
	clear: both;
}

.oops .container .floated,
.oops-fix .container .floated {
	float: left;
	width: 200px;
	height: 200px;
	margin-right: 10px;
	border: 2px solid #000;
	background: var(--attention-hover);
	line-height: 200px;
	color: #fff;
}

.oops .container .non-floated,
.oops-fix .container .non-floated {
	text-align: left;
}

.oops pre,
.oops-fix pre {
	font-size: .5em !important;
}

.wat .slide-background {
	background: url(../assets/i/wat.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.mark {
	color: #666;
	font-size: .6em !important;
}

.context-formatting h2 {
	color: var(--primary);
}

.clear-example h3 {
	margin-bottom: 60px !important;
	text-transform: none !important;
}

.smth-new h2 {
	color: #fff;
}

.smth-new .slide-background {
	background: var(--primary);
}

.smth-new .progress span {
	background: #fff;
}

.smth-new .controls .navigate-left {
	border-right-color: #fff !important;
	opacity: 1;
}

.smth-new .controls .navigate-right {
	border-left-color: #fff !important;
	opacity: 1;
}

.future .slide-background {
	background: url(../assets/i/toy-story.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.thank-you .author {
	width: 60%;
	margin: 60px auto 0;
	text-align: center;
	white-space: nowrap;
}

.thank-you .author-avatar {
	display: inline-block;
	width: 200px;
	margin-right: 60px;
	border-radius: 50%;
	vertical-align: middle;
}

.thank-you .author-main {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.flex .box {
	display: flex;
	margin-bottom: 50px;
	padding: 10px 0;
	border: 2px solid var(--font-main);
	background: var(--attention-hover); }
.flex .box div {
	background: white;
	margin: 5px 10px;
	padding: 5px 10px;
	border: 1px solid var(--font-main); }
.flex .box div:first-child {
	background: var(--secondary); }
.flex .box div:last-child {
	background: var(--primary); }
.flex .box:last-of-type {
	margin-bottom: 0; }

.flex .rule pre {
	width: 80%;
	margin: 0 auto;
	box-shadow: none; }
.flex .rule pre p {
	margin: 0;
	font-size: 0; }
.flex .rule pre p code {
	box-sizing: border-box;
	display: inline-block !important;
	width: 50%;
	font-size: 19px; }
.flex .rule pre p code:last-child {
	font-size: 0;
	line-height: 24px; }
.flex .rule pre p.visible:not(.current-fragment) code.lined {
	text-decoration: line-through; }
.flex .rule pre p.visible:not(.current-fragment) code:last-child, .flex .rule pre p.last code:last-child {
	font-size: 19px; }

.flex .inline-flex .box:last-of-type {
	display: inline-flex; }

.flex .axis > div {
	position: relative;
	height: 400px; }
.flex .axis > div .arrow {
	position: absolute; }
.flex .axis > div .arrow span {
	display: block;
	position: absolute; }
.flex .axis > div .arrow.main {
	text-align: left;
	z-index: 20;
	left: 0;
	right: 0;
	top: 50%;
	height: 5px;
	background: var(--attention-hover); }
.flex .axis > div .arrow.main span {
	top: -40px;
	left: 0; }
.flex .axis > div .arrow.main:after {
	top: -7px;
	right: -50px;
	border-width: 10px 30px;
	border-left-color: var(--attention-hover); }
.flex .axis > div .arrow.cross {
	z-index: 10;
	left: 0;
	right: 0;
	top: 0;
	width: 5px;
	height: 400px;
	margin: 0 auto;
	background: var(--primary); }
.flex .axis > div .arrow.cross span {
	top: 0;
	left: 45px;
	white-space: nowrap;
	transform: rotate(90deg);
	transform-origin: 0 0; }
.flex .axis > div .arrow.cross:after {
	bottom: -50px;
	left: -7px;
	border-width: 30px 10px;
	border-top-color: var(--primary); }
.flex .axis > div .arrow:after {
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	border-style: solid;
	border-color: transparent; }

.flex .direction > div {
	display: flex;
	justify-content: space-between; }
.flex .direction > div > div {
	width: 45%; }
.flex .direction > div > div .box {
	margin-bottom: 48px;
	justify-content: space-between; }
.flex .direction > div > div:nth-of-type(1) .box:nth-of-type(1) {
	flex-direction: row; }
.flex .direction > div > div:nth-of-type(1) .box:nth-of-type(2) {
	flex-direction: row-reverse; }
.flex .direction > div > div:nth-of-type(2) > div {
	display: flex;
	justify-content: space-around; }
.flex .direction > div > div:nth-of-type(2) > div .box {
	margin-bottom: 0; }
.flex .direction > div > div:nth-of-type(2) > div .box:nth-of-type(1) {
	flex-direction: column; }
.flex .direction > div > div:nth-of-type(2) > div .box:nth-of-type(2) {
	flex-direction: column-reverse; }

.flex .wrap > div:nth-of-type(1) {
	width: 45%;
	margin: 0 auto; }

.flex .wrap > div:nth-of-type(2) {
	display: flex;
	justify-content: space-between; }
.flex .wrap > div:nth-of-type(2) > div {
	width: 45%; }
.flex .wrap > div:nth-of-type(2) > div:nth-of-type(1) .box {
	flex-wrap: wrap; }
.flex .wrap > div:nth-of-type(2) > div:nth-of-type(2) .box {
	flex-wrap: wrap-reverse; }

.flex .flow > div {
	width: 45%;
	margin: 0 auto; }
.flex .flow > div .box {
	flex-flow: row-reverse wrap-reverse; }

.flex .justify-content > div:nth-of-type(2) {
	width: 45%;
	margin: 0 auto; }
.flex .justify-content > div:nth-of-type(2) .box {
	justify-content: center; }

.flex .justify-content > div:not(:nth-of-type(2)) {
	display: flex;
	justify-content: space-between; }
.flex .justify-content > div:not(:nth-of-type(2)) > div {
	width: 45%; }
.flex .justify-content > div:not(:nth-of-type(2)):nth-of-type(1) > div:nth-of-type(2) .box {
	justify-content: flex-end; }
.flex .justify-content > div:not(:nth-of-type(2)):nth-of-type(3) > div:nth-of-type(1) .box {
	justify-content: space-between; }
.flex .justify-content > div:not(:nth-of-type(2)):nth-of-type(3) > div:nth-of-type(2) .box {
	justify-content: space-around; }

.flex .align-items > div {
	display: flex;
	justify-content: space-around; }
.flex .align-items > div > div .box {
	height: 200px;
	justify-content: center; }
.flex .align-items > div > div .box div:last-child {
	line-height: 3; }
.flex .align-items > div > div:nth-of-type(1) .box {
	align-items: flex-start; }
.flex .align-items > div > div:nth-of-type(2) .box {
	align-items: flex-end; }
.flex .align-items > div > div:nth-of-type(3) .box {
	align-items: center; }
.flex .align-items > div > div:nth-of-type(4) .box {
	align-items: baseline; }
.flex .align-items > div > div:nth-of-type(5) .box {
	align-items: stretch; }

.flex .align-content > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around; }
.flex .align-content > div > div {
	width: 26%; }
.flex .align-content > div > div .box {
	height: 200px;
	justify-content: center;
	flex-wrap: wrap; }
.flex .align-content > div > div:nth-of-type(1) .box {
	align-content: flex-start; }
.flex .align-content > div > div:nth-of-type(2) .box {
	align-content: flex-end; }
.flex .align-content > div > div:nth-of-type(3) .box {
	align-content: center; }
.flex .align-content > div > div:nth-of-type(4) .box {
	align-content: stretch; }
.flex .align-content > div > div:nth-of-type(5) .box {
	align-content: space-between; }
.flex .align-content > div > div:nth-of-type(6) .box {
	align-content: space-around; }

.flex .order pre {
	width: 40%;
	margin: 0 auto; }

.flex .order > div {
	display: flex;
	justify-content: space-between; }
.flex .order > div > div {
	width: 45%; }
.flex .order > div > div .box {
	justify-content: space-between; }
.flex .order > div > div:nth-of-type(2) .box div:nth-of-type(1) {
	order: 3; }
.flex .order > div > div:nth-of-type(2) .box div:nth-of-type(2) {
	order: -1; }
.flex .order > div > div:nth-of-type(2) .box div:nth-of-type(3) {
	order: -1; }
.flex .order > div > div:nth-of-type(2) .box div:nth-of-type(4) {
	order: 3; }
.flex .order > div > div:nth-of-type(2) .box div:nth-of-type(5) {
	order: -2; }
.flex .order > div > div:nth-of-type(2) .box div:nth-of-type(6) {
	order: 2; }

.flex .align-self > div {
	display: flex;
	justify-content: space-around; }
.flex .align-self > div > div .box {
	height: 200px;
	justify-content: center; }
.flex .align-self > div > div .box div:last-child {
	line-height: 3;
	align-self: flex-start; }
.flex .align-self > div > div:nth-of-type(1) .box div:nth-of-type(1) {
	align-self: flex-start; }
.flex .align-self > div > div:nth-of-type(2) .box div:nth-of-type(1) {
	align-self: flex-end; }
.flex .align-self > div > div:nth-of-type(3) .box div:nth-of-type(1) {
	align-self: center; }
.flex .align-self > div > div:nth-of-type(4) .box div:nth-of-type(1) {
	align-self: baseline; }
.flex .align-self > div > div:nth-of-type(5) .box div:nth-of-type(1) {
	align-self: stretch; }

.flex .basis-grow-shrink .flex-basis .box div:nth-of-type(1) {
	flex-basis: 200px; }

.flex .basis-grow-shrink .flex-basis .box div:nth-of-type(2) {
	flex-basis: 20px; }

.flex .basis-grow-shrink .flex-basis .box div:nth-of-type(3) {
	flex-basis: 150px; }

.flex .basis-grow-shrink .flex-grow .box div:nth-of-type(1) {
	flex-grow: 2; }

.flex .basis-grow-shrink .flex-grow .box div:nth-of-type(2) {
	flex-grow: 1; }

.flex .basis-grow-shrink .flex-grow .box div:nth-of-type(3) {
	flex-grow: 3; }

.flex .basis-grow-shrink .flex-shrink .box div {
	flex-basis: 1000px; }
.flex .basis-grow-shrink .flex-shrink .box div:nth-of-type(1) {
	flex-shrink: 2; }
.flex .basis-grow-shrink .flex-shrink .box div:nth-of-type(2) {
	flex-shrink: 1; }
.flex .basis-grow-shrink .flex-shrink .box div:nth-of-type(3) {
	flex-shrink: 3; }

.flex .basis-grow-shrink-short .box:nth-of-type(1) div:nth-of-type(1) {
	flex: 2 1 100px; }

.flex .basis-grow-shrink-short .box:nth-of-type(1) div:nth-of-type(2) {
	flex: 1 2 300px; }

.flex .basis-grow-shrink-short .box:nth-of-type(1) div:nth-of-type(3) {
	flex: 2 1 100px; }

.flex .basis-grow-shrink-short .box:nth-of-type(2) {
	margin-bottom: 0; }
.flex .basis-grow-shrink-short .box:nth-of-type(2) div:nth-of-type(1) {
	flex: 2 1 500px; }
.flex .basis-grow-shrink-short .box:nth-of-type(2) div:nth-of-type(2) {
	flex: 1 2 400px; }
.flex .basis-grow-shrink-short .box:nth-of-type(2) div:nth-of-type(3) {
	flex: 2 1 300px; }

.flex .basis-grow-shrink-short > div:not(.box) {
	display: flex;
	justify-content: space-between; }
.flex .basis-grow-shrink-short > div:not(.box) > div {
	width: 45%; }
.flex .basis-grow-shrink-short > div:not(.box) > div > p {
	margin: 20px 0 10px; }
.flex .basis-grow-shrink-short > div:not(.box) > div > div {
	margin: 0 0 20px;
	font-size: 0.6em;
	text-align: left; }
.flex .basis-grow-shrink-short > div:not(.box) > div > div div {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px; }
.flex .basis-grow-shrink-short > div:not(.box) > div > div div span {
	display: block;
	text-align: center; }
.flex .basis-grow-shrink-short > div:not(.box) > div > div div span:first-child {
	border-bottom: 2px solid var(--font-main); }
.flex .basis-grow-shrink-short > div:not(.box) > div > div:last-child {
	margin: 0; }
.flex .basis-grow-shrink-short > div:not(.box) > div > div:last-child span {
	text-decoration: underline; }

.flex .demo #button-set {
	margin-bottom: 20px; }
.flex .demo #button-set p {
	margin: 0; }
.flex .demo #button-set span {
	display: inline-block;
	vertical-align: middle;
	padding: 5px 10px;
	background: var(--attention-hover);
	color: #fff;
	font-size: 0.5em;
	cursor: pointer; }
.flex .demo #button-set span.current {
	background-color: var(--font-main);
	cursor: default; }

.flex .demo .wrapper {
	display: flex;
	margin: 0 auto;
	width: 100%;
	flex-flow: row wrap;
	font-weight: bold;
	text-align: center;
	transition: width 0.3s linear; }
.flex .demo .wrapper > * {
	padding: 10px;
	flex: 1 100%; }
.flex .demo .wrapper .header {
	background: var(--attention);
	order: 1; }
.flex .demo .wrapper .main {
	text-align: left;
	background: var(--primary); }
.flex .demo .wrapper .main p {
	margin: 0; }
.flex .demo .wrapper .aside {
	font-size: 0.7em; }
.flex .demo .wrapper .aside.aside-1 {
	background: var(--secondary); }
.flex .demo .wrapper .aside.aside-2 {
	background: var(--secondary-hover); }
.flex .demo .wrapper .footer {
	color: white;
	background: var(--font-main);
	order: 1;
	font-size: 0.7em; }
.flex .demo .wrapper .navigation {
	display: flex;
	flex-flow: column wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	padding: 0; }
.flex .demo .wrapper .navigation span {
	display: block;
	text-align: center;
	padding: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.5em;
	padding: 10px;
	color: white;
	cursor: pointer; }
.flex .demo .wrapper .navigation span:hover {
	background: var(--attention-hover); }
.flex .demo .wrapper .navigation li:before {
	display: none; }
.flex .demo .wrapper.middle .aside, .flex .demo .wrapper.large .aside {
	flex: 1 auto; }
.flex .demo .wrapper.middle .navigation, .flex .demo .wrapper.large .navigation {
	flex-flow: row wrap;
	justify-content: space-around; }
.flex .demo .wrapper.middle .navigation span, .flex .demo .wrapper.large .navigation span {
	border: none; }
.flex .demo .wrapper.middle .header, .flex .demo .wrapper.large .header {
	order: -1; }
.flex .demo .wrapper.large .main {
	flex: 3 0px; }
.flex .demo .wrapper.large .aside-1 {
	order: 1; }
.flex .demo .wrapper.large .main {
	order: 2; }
.flex .demo .wrapper.large .aside-2 {
	order: 3; }
.flex .demo .wrapper.large .footer {
	order: 4; }
.flex .demo .wrapper.large .navigation {
	justify-content: flex-end; }

.columns .rule > div {
	display: flex;
	justify-content: space-between; }
.columns .rule > div > div {
	width: 45%; }
.columns .rule > div > div small {
	text-align: left; }
.columns .rule > div > div:nth-of-type(1) small {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2; }
.columns .rule > div > div:nth-of-type(2) small {
	-webkit-column-width: 100px;
	-moz-column-width: 100px;
	column-width: 100px; }

.columns .gap > div {
	width: 80%;
	margin: 0 auto; }
.columns .gap > div pre {
	width: 40%;
	margin: 0 auto 20px; }
.columns .gap > div small {
	text-align: left;
	-webkit-columns: 2 auto;
	-moz-columns: 2 auto;
	columns: 2 auto;
	-webkit-column-gap: 200px;
	-moz-column-gap: 200px;
	column-gap: 200px; }

.columns .separator > div {
	width: 80%;
	margin: 0 auto; }
.columns .separator > div pre {
	width: 50%;
	margin: 0 auto 20px; }
.columns .separator > div small {
	text-align: left;
	-webkit-columns: 2 auto;
	-moz-columns: 2 auto;
	columns: 2 auto;
	-webkit-column-gap: 100px;
	-moz-column-gap: 100px;
	column-gap: 100px;
	-webkit-column-rule: 4px solid var(--font-main);
	-moz-column-rule: 4px solid var(--font-main);
	column-rule: 4px solid var(--font-main); }

.columns .span > div {
	width: 80%;
	margin: 0 auto; }
.columns .span > div pre {
	width: 40%;
	margin: 0 auto 20px; }
.columns .span > div > div {
	font-size: 0.5em;
	text-align: left;
	-webkit-columns: 2 auto;
	-moz-columns: 2 auto;
	columns: 2 auto;
	-webkit-column-gap: 100px;
	-moz-column-gap: 100px;
	column-gap: 100px;
	-webkit-column-rule: 4px solid var(--font-main);
	-moz-column-rule: 4px solid var(--font-main);
	column-rule: 4px solid var(--font-main); }
.columns .span > div > div h4 {
	padding: 10px;
	margin: 0;
	text-align: center;
	-webkit-column-span: all;
	-moz-column-span: all;
	column-span: all; }

.columns .break > pre {
	margin-bottom: 30px; }

.columns .break .fragment > div {
	width: 80%;
	margin: 0 auto; }
.columns .break .fragment > div ul {
	padding: 10px;
	margin-bottom: 20px;
	-webkit-columns: 150px;
	-moz-columns: 150px;
	columns: 150px;
	-webkit-column-gap: 2em;
	-moz-column-gap: 2em;
	column-gap: 2em;
	font-size: 0.3em;
	background: #999; }
.columns .break .fragment > div ul li {
	margin-bottom: 10px;
	padding: 20px;
	background-color: #fff; }
.columns .break .fragment > div ul:nth-of-type(2) li {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid; }

.columns .fill > div {
	display: flex;
	justify-content: space-between; }
.columns .fill > div > div {
	width: 45%; }
.columns .fill > div > div div {
	text-align: left;
	-webkit-columns: 3 auto;
	-moz-columns: 3 auto;
	columns: 3 auto;
	font-size: 0.7em; }
.columns .fill > div > div:nth-of-type(1) div {
	-webkit-column-fill: balance;
	-moz-column-fill: balance;
	column-fill: balance; }
.columns .fill > div > div:nth-of-type(2) div {
	-webkit-column-fill: auto;
	-moz-column-fill: auto;
	column-fill: auto; }

	#container {
		position: relative;
		margin: 15px 0;
		height: 70%;
		font-size: 0.5em;
		top: -250px;
		left: 150px;
	}
	.pos {
		display: inline-block;
		position: absolute;
		width: 160px;
		height: 160px;
		font-size: 1em;
	}
	#first {
		background: var(--primary-75) !important;
		z-index: 1;
    left: 0;
	}
	#second {
		background: var(--secondary-75) !important;
		z-index: 2;
    left: 75px;
    top: 50px;
	}
	#third {
		background: var(--attention-75) !important;
		z-index: 3;
    left: 155px;
		top: 100px;
	}
	#fourth {
		background: var(--primary-hover-75) !important;
		z-index: 4;
    left: 260px;
		top: 150px;
	}
	#fifth {
		background: var(--secondary-hover-75) !important;
		z-index: 5;
    left: 335px;
		top: 200px;
	}
	#six {
		background: var(--attention-hover-75) !important;
		z-index: 6;
    left: 420px;
		top: 250px;
	}
	#seven {
		background: var(--controls-75) !important;
		z-index: 7;
    top: 310px;
    left: 510px;
	}