.front-end-block {background: #fff; overflow: hidden}
.front-end-block .full-block-first {
	display: flex;
	justify-content: space-between;
	position: relative;
	height: 400px;
}

.front-end-block .full-block-first > div:first-of-type {margin-top: 100px}

.front-end-block .full-block-first .image {
	position: absolute;
	top: -150px;
	right: -350px;
	z-index: 0;
}

.image.full-stack {transform: translateX(300px)}
.info-block {display: flex}
.info-block .profession {z-index: 1}

.front-end-block h4.profession {
    font-size: 1.25rem;
    letter-spacing: .2em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-left: 4px solid #f16a51;
    padding-left: 15px;
    margin-right: 38px;
    font-weight: 300;
    display: block;
}

.front-end-block h4.profession.back-end {border-color: #2b55a6}

.block-with-border {
	overflow: visible;
	z-index: 2;
}

.block-with-border .start-time {
	font-weight: 700;
}

.block-with-border .start-time .start-date {color: #F16A51; font-size: 18px}
.block-with-border .start-time .start-kiev {font-weight: 500}
.block-with-border .start-time .start-date.back-end {color: #2b55a6}

.block-with-border h1.front-heading {
	margin-top: 20px;
    color: #f16a51;
    letter-spacing: -1px;
    font-size: 4.2rem;
    -webkit-animation: 3s pulseHeading ease-in-out infinite;
    animation: 3s pulseHeading ease-in-out infinite;
}

.block-with-border h1.front-heading.back {color: #2b55a6}

.block-with-border h2.front-heading {
	margin-top: 10px;
    color: #333;
    font-size: 2.8rem;
}

/* Стили для программы обучения Java */
.front-end-block.java .buttons .btn.red {background-color: #5ECD8A}
.front-end-block.java .buttons .btn.red {
    -webkit-box-shadow: 4px 6px 10px rgb(81 241 135 / 20%);
    box-shadow: 4px 6px 10px rgb(81 241 135 / 20%);
}

.front-end-block.java .buttons .red .btn__blobs div {background: #1e703f}
.front-end-block.java .buttons .btn.red:hover {
    -webkit-box-shadow: 4px 6px 10px rgb(25 119 57 / 68%);
    box-shadow: 4px 6px 10px rgb(25 119 57 / 68%);
}

.front-end-block.java .technologies ul.position_tech li::before {color: #5ECD8A}


.front-end-block.java .bottom-stuff img:last-of-type {
    position: absolute;
    right: -250px;
    transform: scale(0.3);
    top: -77px;
}

/* Стили для PHP */
.front-end-block.php .buttons .btn.red,
.front-end-block.php .bottom-stuff .play-button.back-end div {
    -webkit-box-shadow: 4px 6px 10px rgb(81 241 135 / 20%);
    box-shadow: 4px 6px 10px rgb(81 241 135 / 20%);
}

.front-end-block.php .buttons .btn.red.back-end .btn__blobs div {background: #1e703f}
.front-end-block.php .buttons .btn.red:hover {
    -webkit-box-shadow: 4px 6px 10px rgb(25 119 57 / 68%);
    box-shadow: 4px 6px 10px rgb(25 119 57 / 68%);
}

.front-end-block.php .technologies ul.position_tech.back-end li::before {color: #479A6B}

.front-end-block.php .buttons .btn.red.back-end,
.front-end-block.php .bottom-stuff .play-button.back-end div {background: #479A6B}

/* Стили для Front-end */
.front-end-block.html .buttons .btn.red {
    -webkit-box-shadow: 4px 6px 10px rgb(81 241 135 / 20%);
    box-shadow: 4px 6px 10px rgb(81 241 135 / 20%);
}

.front-end-block.html .buttons .btn.red .btn__blobs div {background: #1e703f}
.front-end-block.html .buttons .btn.red:hover {
    -webkit-box-shadow: 4px 6px 10px rgb(25 119 57 / 68%);
    box-shadow: 4px 6px 10px rgb(25 119 57 / 68%);
}

.front-end-block.html .technologies ul.position_tech li::before {color: #4CA871}

.front-end-block.html .buttons .btn.red {background: #4CA871}

/* Стили для программы обучения Full Stack */

.full-stack-bg.light-blue {
	position: relative;
	right: 450px;
}

.full-stack-items-main-panel {
	transform: scale(2.1);
    z-index: 5;
}

@media(min-width: 1650px) {.full-stack-bg.light-blue {transform: scale(1.2)}}
@media(min-width: 1980px) {.full-stack-bg.light-blue {right: 0}}

@media(min-width: 1451px) {
	.full-stack-items-main-panel {top: 320px;left: 600px}
	.full-stack-gears {top: 250px;left: 870px;width: 200px}
	.full-stack-blocks-1 {top: 250px;left: 500px}
	.full-stack-blocks-2 {top: 500px;left: 500px}
	.full-stack-blocks-3 {top: 450px;left: 500px}
	.full-stack-blocks-4 {top: 450px;left: 720px}
}

@media(max-width: 1450px) and (min-width: 1251px) {
	.full-stack-items-main-panel {top: 320px;left: 500px}
	.full-stack-gears {top: 250px;left: 770px;width: 200px}
	.full-stack-blocks-1 {top: 250px;left: 400px}
	.full-stack-blocks-2 {top: 500px;left: 400px}
	.full-stack-blocks-3 {top: 450px;left: 400px}
	.full-stack-blocks-4 {top: 450px;left: 620px}
}

@media(max-width: 1250px) and (min-width: 1024px) {
	.full-stack-items-main-panel {top: 320px;left: 400px}
	.full-stack-gears {top: 250px;left: 670px;width: 200px}
	.full-stack-blocks-1 {top: 250px;left: 300px}
	.full-stack-blocks-2 {top: 500px;left: 300px}
	.full-stack-blocks-3 {top: 450px;left: 300px}
	.full-stack-blocks-4 {top: 450px;left: 520px}
}

@media(min-width: 1025px) {.full-stack-bg.light-blue.tablet {display: none}}
@media(min-width: 1024px) {.full-stack-man-table {display: none}}
@media(max-width: 1023px) {.full-stack-man-table {display: block!important}}
@media(max-width: 1024px) and (min-width: 801px) {.full-stack-bg.light-blue.tablet {transform: scale(2.5); position: static}}
@media(max-width: 800px) and (min-width: 581px) {.full-stack-bg.light-blue.tablet {transform: scale(3.5); position: static}}
@media(max-width: 580px) and (min-width: 381px) {.full-stack-bg.light-blue.tablet {transform: scale(5.5); position: static}}
@media(max-width: 380px) {.full-stack-bg.light-blue.tablet {transform: scale(6.5); position: static}}

@media(max-width: 769px) and (min-width: 561px) {.full-stack-man-table {transform: scale(0.5);bottom: -40%!important;}}
@media(max-width: 560px) {.full-stack-man-table {transform: scale(0.5);bottom: -25%!important;}}
@media(max-width: 460px) {.full-stack-man-table {transform: rotateY(180deg) scale(0.5); right: 0!important}}

/* Конец стилей для Full Stack */

.front-end-block.full {background: #B5CEE4}
.front-end-block.full .block-with-border h1.front-heading,
.front-end-block.full .block-with-border .start-time .start-date,
.front-end-block.full .technologies ul.position_tech li::before {color: #3A6185}
.front-end-block.full h4.profession {border-color: #3A6185}
.front-end-block.full .buttons .btn.red {
	background: #3A6185; 
	-webkit-box-shadow: 4px 6px 10px rgb(81 118 241 / 20%);
    box-shadow: 4px 6px 10px rgb(81 118 241 / 20%);
}
.front-end-block.full .buttons .red .btn__blobs div {background: #1b3248}

.front-end-block .technologies, .unity-block .technologies, .python-block .technologies {margin-top: 50px}

.front-end-block .technologies ul.position_tech, .unity-block .technologies ul.position_tech, 
.python-block .technologies ul.position_tech {
	list-style: none;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 650px;
}

.front-end-block .technologies ul.position_tech li, .unity-block .technologies ul.position_tech li, .python-block .technologies ul.position_tech li {width: 120px}
.front-end-block .technologies ul.position_tech li.wide, .unity-block .technologies ul.position_tech li.wide, .python-block .technologies ul.position_tech li.wide {width: 170px}

.front-end-block .technologies ul.position_tech li, .unity-block .technologies ul.position_tech li, .python-block .technologies ul.position_tech li {
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight: 700;
	z-index: 5;
}

.front-end-block .technologies ul.position_tech li::before, .unity-block .technologies ul.position_tech li::before,
.python-block .technologies ul.position_tech li::before {
    display: inline-block;
    vertical-align: middle;
    content: '\f111';
    color: #f16a51;
    margin-right: 12px;
    font-size: 8px;
    font-family: 'Font Awesome 5 Free';
}

.front-end-block .technologies ul.position_tech.back-end li::before, .unity-block .technologies ul.position_tech.back-end li::before, .python-block .technologies ul.position_tech.back-end li::before {color: #2b55a6}

.front-end-block .buttons, .unity-block .buttons, .python-block .buttons {
	display: flex;
	margin-top: 20px;
}

.front-end-block .buttons .btn.white, .unity-block .buttons .btn.white, .python-block .buttons .btn.white {
	margin-left: 40px;
	border: 1px solid #232323;
	background: transparent;
}

.front-end-block .buttons .btn.red, .unity-block .buttons .btn.red, .python-block .buttons .btn.red {
    -webkit-box-shadow: 4px 6px 10px rgba(241,106,81,.2);
    box-shadow: 4px 6px 10px rgba(241,106,81,.2);
}

.front-end-block .buttons .btn.red.back-end {
	background: #2b55a6;
	-webkit-box-shadow: 4px 6px 10px rgba(83, 123, 243, 0.2);
    box-shadow: 4px 6px 10px rgba(83, 123, 243, 0.2);
}

.front-end-block .buttons .btn.red.back-end .btn__blobs div {background: #1c386f}

#pictures-bg {
	position: absolute;
	z-index: 10;
}

#pictures-bg img {position: relative}

#pictures-bg .picture-wall {
	top: 250px;
	left: 560px;
}

#pictures-bg .clock.back-end {transform: scale(0.7)}

@media(min-width: 1401px) {
	#pictures-bg .clock {
		top: 200px;
		left: 200px;
	}
	
	#pictures-bg .bookshelf {
		top: 400px;
		left: 200px;
	}
}

@media(max-width: 1400px) and (min-width: 1251px) {
	#pictures-bg .clock {
		top: 200px;
		left: 320px;
	}
	
	#pictures-bg .bookshelf {
		top: 400px;
		left: 300px;
	}
}

@media(max-width: 1250px) {
	#pictures-bg .clock {
		top: 200px;
		left: 720px;
	}
	
	#pictures-bg .picture-wall {top: 350px}
	
	#pictures-bg .bookshelf {display: none}
}

#pictures-bg .bookshelf_2 {
	top: 500px;
	left: 800px;
}

#pictures-bg .dot-full-stack {
	top: 500px;
    left: 190px;
    transform: scale(1.5);
}

#pictures-bg .question-full-stack {
	top: 350px;
    left: 350px;
    transform: scale(4);
}

#pictures-bg .question-mark-full-stack {
	top: 250px;
	left: 700px;
}

#pictures-bg .question-mark-full-stack-2 {
	top: 250px;
	left: 800px;
}

#pictures-bg .question-mark-full-stack-3 {
	top: 350px;
	left: 750px;
}

@media(min-width: 1500px) and (max-width: 1570px) {#pictures-bg .question-full-stack {left: 300px}}
@media(min-width: 1200px) and (max-width: 1310px) {#pictures-bg .question-full-stack {left: 280px}}


@media(min-width: 1170px) and (max-width: 1201px) {
	
	#pictures-bg .question-mark-full-stack {left: 600px}
	#pictures-bg .question-mark-full-stack-2 {left: 700px}
	#pictures-bg .question-mark-full-stack-3 {left: 650px}
	
	#pictures-bg .dot-full-stack {
		top: 450px;
		left: 130px;
	}
	
	#pictures-bg .question-full-stack {
		transform: scale(2.5); 
		top: 350px;
	    left: 250px;
	}
}

@media(min-width: 1024px) and (max-width: 1169px) {
	
	#pictures-bg .question-mark-full-stack {left: 500px}
	#pictures-bg .question-mark-full-stack-2 {left: 600px}
	#pictures-bg .question-mark-full-stack-3 {left: 550px}
	
	#pictures-bg .dot-full-stack {
		top: 450px;
		left: 130px;
	}
	
	#pictures-bg .question-full-stack {
		transform: scale(3) rotate(25deg); 
		top: 200px;
	    left: 220px;
	}
}

.front-end-block .bottom-stuff {
	position: relative;
	top: 5px;
	height: 258px;
}

.front-end-block .bottom-stuff .play-button {
	position: absolute;
	left: 580px;
	bottom: 50px;
	z-index: 14;
}

@media(max-width: 1285px) and (min-width: 1025px) {.front-end-block .bottom-stuff .play-button {left: 370px}}
@media(max-width: 1024px) and (min-width: 769px) {.front-end-block .bottom-stuff .play-button {left: 50px}}

.front-end-block .bottom-stuff .front-end-man {
	position: absolute;
	right: 180px;
	bottom: 0;
}

.front-end-block .bottom-stuff img:last-of-type {
	position: absolute;
	right: -50px;
	bottom: 0;
}

.front-end-block .bottom-stuff .play-button.back-end div {
	background: #2b55a6;
	-webkit-box-shadow: 4px 6px 10px rgba(83, 123, 243, 0.2);
    box-shadow: 4px 6px 10px rgba(83, 123, 243, 0.2);
}

@media(min-width: 1025px) {.front-end-bg-tablet, .tablet-picture-wall {display: none}}

@media(max-width: 1024px) {
	.front-end-block .image {display: none}
	.full-block-first {flex-direction: column}
	.front-end-block .bottom-stuff {height: 358px}
	
	.front-end-bg-tablet {
		position: absolute;
	    top: 20px;
		right: -70px;
		z-index: 0;
	}
	
	.tablet-picture-wall {
		position: absolute;
	    top: -300px;
		right: 50px;
	}
	
	.front-end-block .bottom-stuff img:last-of-type {display: none}
	
	.front-end-man {
		left: 500px;
	}
}

@media(max-width: 768px) {
	.front-end-block .bottom-stuff {height: 408px}
	.front-end-bg-tablet {transform: scale(1.3)}
	.front-end-block .technologies ul.position_tech {width: initial; padding-left: 50px}
	.front-end-block .technologies ul.position_tech li,
	.front-end-block .technologies ul.position_tech li.wide {width: 33%}
	.tablet-picture-wall:not(.full-stack) {display: none}
	
	.tablet-picture-wall.full-stack {transform: scale(1.5)}
	
	.info-block {justify-content: center}
	
	.front-end-block .bottom-stuff .play-button {left: 50px}
	
	.front-end-bg-tablet {
		position: absolute;
	    top: 90px;
		right: -70px;
		z-index: 0;
	}
	
	.front-end-block .technologies {
		justify-content: center;
		flex-wrap: wrap;
		display: flex;
		margin-bottom: 50px;
	}
	
	.front-end-block .bottom-stuff .front-end-man {right: 50px}
	
	.front-end-man {
		left: 300px;
		top: 100px;
	}
	
	.front-end-man.not-top {top: initial}
}

@media(max-width: 560px) {
	.block-with-border h1.front-heading {font-size: 3.4rem}
	
	.front-end-block .buttons {flex-wrap: wrap}
	.front-end-block .buttons .btn {
		width: 100%;
		margin-left: 0!important;
		padding: 15px 0;
		text-align: center;
	}
	.front-end-block .buttons .btn.red {margin-bottom: 20px}
	.front-end-block .bottom-stuff {height: 558px}
	.front-end-block .technologies ul.position_tech li,
	.front-end-block .technologies ul.position_tech li.wide {width: 45%}
	.front-end-bg-tablet {top: 250px}
	.start-kiev {display: block; margin-top: 5px}
	
	.front-end-man {
		left: 200px;
		top: 250px;
	}
	
	.front-end-man.not-top {top: initial}
	
	.tablet-picture-wall.full-stack {transform: scale(2)}
}

@media(max-width: 460px) {
	.block-with-border h1.front-heading {font-size: 2.2rem}
	.block-with-border h2.front-heading {font-size: 2rem}
	.front-end-block .bottom-stuff .play-button {bottom: 180px; right: 0; left: initial}
	.front-end-block .technologies ul.position_tech {padding-left: 20px}
	.front-end-block .technologies ul.position_tech li {font-size: 12px}
	
	.front-end-man {
		left: -50px;
		top: 250px;
		transform: scaleX(-1);
	}
	
	.front-end-man.not-top {top: initial}
	
	.tablet-picture-wall.full-stack {transform: scale(2.5)}
}
	
/* Блок с таймером */
.timer-block {
	background: #1a1a1a;
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
}

.timer-block .bubble-timer {
	position: absolute;
    height: 100px;
    width: 100%;
    background: #1a1a1a;
    z-index: 10;
    left: 0;
    border-radius: 50%;
}

.timer-block h4 {
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 30px;
}

#timerToStart {
	display: flex;
	justify-content: space-between;
	color: #fff;
	font-size: 16px;
	margin-bottom: 60px;
}

#timerToStart>div {
    border-radius: 100px;
    border: 3px solid #E07159;
    width: 150px;
    height: 150px;
    text-align: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

#timerToStart > div > div {width: 100%}

#days, #hours, #minutes, #seconds {
	font-weight: 700;
	font-size: 36px;
}

.timer-block .infoCourse {
	display: flex;
	justify-content: space-between;
	color: #fff;
}

@media(min-width: 651px) {.timer-block .infoCourse .people_course {padding-left: 30px}}

@media(max-width: 650px) {
	.timer-block .infoCourse {flex-direction: column; text-align: center}
	.timer-block .infoCourse > div {margin-bottom: 20px}
}

.timer-block .infoCourse .nums {
	color: #01D084;
	font-size: 24px;
	font-weight: 400;
	position: relative;
}

.timer-block .infoCourse .nums i {
	position: absolute;
	cursor: pointer;
	top: 10px;
	font-size: 20px;
	-webkit-animation: 4s playButton ease-in-out alternate infinite;
    animation: 4s playButton ease-in-out alternate infinite;
    transition: color 500ms ease;
}

@media(min-width: 651px) {.timer-block .infoCourse .nums i {right: -20px;}}
@media(max-width: 650px) {.timer-block .infoCourse .nums i {right: 20%;}}

.timer-block .infoCourse .nums i:hover {color: #fff}

.timer-block .infoCourse .nums .big-num {
	font-weight: 700;
	font-size: 64px;
}

@media(min-width: 1351px) {
	#timerToStart {
		width: 60%;
		margin-left: 20%;
	}
	
	.timer-block .infoCourse {
		width: 60%;
		margin-left: 20%;
	}
}

@media(max-width: 1350px) and (min-width: 951px) {
	#timerToStart {
		width: 80%;
		margin-left: 10%;
	}
	
	.timer-block .infoCourse {
		width: 80%;
		margin-left: 10%;
	}
}

@media(max-width: 720px) {
	#timerToStart {flex-wrap: wrap; justify-content: center}
	
	#timerToStart > div {
		margin: 30px 50px;
		margin-top: 0;
	}
}

@media(max-width: 600px) and (min-width: 421px) {	
	#timerToStart > div {
		margin: 30px 100px;
		margin-top: 0;
	}
}

@media(max-width: 420px) {	
	#timerToStart > div {
		margin: 30px 20px;
		margin-top: 0;
	}
}

/* Блок что в курсе? */
#whatisinside {
	background: #F5F5F5;
	padding-top: 130px;
	padding-bottom: 100px;
}

#whatisinside h2 {
	text-align: center;
	color: #000;
}

#whatisinside .cirlces {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

#whatisinside .cirlces > div {text-align: center; margin-right: 30px; margin-top: 70px;}
#whatisinside .cirlces > div:last-of-type {margin-right: 0}

#whatisinside .cirlces > div > div {
	background: transparent;
	border: 5px solid #E07159;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	padding: 30px;
}

#whatisinside .cirlces > div > div img {width: 100%}
#whatisinside .cirlces > div h3 {font-size: 23px; margin: 10px 0; color: #000}
#whatisinside .cirlces > div p {color: #8097AD}

@media(min-width: 500px) {#whatisinside h2, #process-learning h3, .practicum h2, .reviews > h3, .course-projects > h3 {font-size: 60px}}
@media(max-width: 499px) {#whatisinside h2, #process-learning h3, .practicum h2, .reviews > h3, .course-projects > h3 {font-size: 50px}}

.showOnMouse {
	z-index: 15;
	opacity: 0.95;
}

.features.program {
	background: #fff;
    padding-top: 100px;
    padding-bottom: 130px;
    text-align: center;
    position: relative;
}

.features.program h2 {color: #000}
.features.program p.feature-text {color: #536476}

/* Блок с характеристиками курса */
#images_info {
	justify-content: center;
	flex-wrap: wrap;
}

#images_info img {margin: 20px}

/* Процесс обучения */
#process-learning {
	background: #1a1a1a;
	padding-top: 100px;
	position: relative;
}

#process-learning .bubble-process {
	position: absolute;
    height: 100px;
    width: 100%;
    background: #1a1a1a;
    z-index: 10;
    left: 0;
    top: -50px;
    border-radius: 50%;
}

#process-learning h3 {
	color: #fff;
	text-align: center;
	margin-bottom: 50px;
}

#process-learning .main-parts {
	display: flex;
	justify-content: space-around;
}

@media(min-width: 1201px) {#process-learning .main-parts {width: 80%; margin-left: 10%}}

@media(min-width: 871px) {
	#process-learning > div > div:first-of-type {width: 350px;}
	#process-learning > div > div:last-of-type .inner {margin-bottom: 30px}
}

@media(max-width: 870px) {
	#process-learning .main-parts {flex-wrap: wrap; flex-direction: column}
	#process-learning > div > div:first-of-type img {display: none}
	#process-learning > div > div:first-of-type {margin-bottom: 60px}
	#process-learning > div > div:last-of-type .inner {margin-bottom: 70px}
}

@media(min-width: 450px) {
	#process-learning > div > div:last-of-type .inner .p-1 {left: 80px}
	#process-learning > div > div:last-of-type .inner .p-2 {right: 65px}
	#process-learning > div > div:last-of-type .inner .p-3 {left: 63px}
	#process-learning > div > div:last-of-type .inner .p-4 {right: 56px}
	#process-learning > div > div:last-of-type .inner .p-5 {left: 70px}
	#process-learning > div > div:last-of-type .inner .p-6 {right: 67px}
	#process-learning > div > div:last-of-type .inner .p-7 {left: 112px}
	#process-learning>div>div:last-of-type .inner p {top: -14px; font-size: 15px;}
	#process-learning > div > div:last-of-type .inner p span {font-size: 11px}
	#process-learning {padding-bottom: 50px}
}

@media(max-width: 870px) and (min-width: 450px) {#process-learning > div > div:last-of-type {width: 410px; margin: 0 auto}}

@media(max-width: 449px) {
	#process-learning > div > div:last-of-type {width: 288px; margin: 0 auto}
	#process-learning > div > div:last-of-type .inner .p-1 {left: 48px}
	#process-learning > div > div:last-of-type .inner .p-2 {right: 35px}
	#process-learning > div > div:last-of-type .inner .p-3 {left: 42px}
	#process-learning > div > div:last-of-type .inner .p-4 {right: 23px}
	#process-learning > div > div:last-of-type .inner .p-5 {left: 40px}
	#process-learning > div > div:last-of-type .inner .p-6 {right: 37px}
	#process-learning > div > div:last-of-type .inner .p-7 {left: 58px}
	#process-learning>div>div:last-of-type .inner p {top: -21px; font-size: 13px;}
	#process-learning > div > div:last-of-type .inner p span {font-size: 9px}
	#process-learning {padding-bottom: 30px}
}

#process-learning > div > div:first-of-type {
	color: #9C9C9C;
	text-align: center;
}

#process-learning > div > div:first-of-type img {margin-top: 30px}

#process-learning > div > div:last-of-type .inner {position: relative; text-align: center;}

#process-learning > div > div:last-of-type .inner p {
	position: absolute;
	text-align: center;
	color: #C2C2C2;
}

/* Тучки */
#clouds {background: #1a1a1a}

/* Блок с графиком */
.curveUpColor {background: #efefef}

.graphic {
	background: #1a1a1a;
	padding-top: 50px;
	padding-bottom: 50px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	color: #fff;
}

@media(min-width: 1025px) {.graphic > div {width: 45%}}
@media(max-width: 1024px) and (min-width: 845px) {
	.graphic > div:first-of-type {width: 55%}
	.graphic > div:last-of-type {width: 45%}
}

@media(max-width: 844px) {
	.graphic > div {width: 100%}
	.graphic > div:last-of-type {text-align: center; margin-top: 40px}
}

.graphic > div h4 {
	font-size: 36px;
	width: 350px;
	margin-bottom: 10px;
}

.graphic > div p {
	color: #ececec;
	width: 400px;
	margin-bottom: 10px;
}

@media(max-width: 650px) {
	.graphic > div {text-align: center}
	.graphic > div p, .graphic > div h4 {width: 100%}
}

@media(max-width: 400px) {.graphic > div h4 {font-size: 30px}}

.graphic > div .btn {
	width: 250px;
	padding: 15px 0;
	text-align: center;
}

/* Блок с практикумом */
.overview.program>h2, .overview.program h3 {color: #000}
.overview.program>h2 span {color: #E07159}
.overview.program .list_overview .text-holder p.txt {color: #8097AD}
.overview.program b {color: #62788d}
.overview.program a {border-bottom: 1px solid #62788d; color: #62788d}
.overview.program a:hover {border: none}
.overview.practicum h2 {text-align: center}

.practicum {
	background: #EFEFEF;
	padding-top: 50px;
	padding-bottom: 90px;
}

.practicum h2 {
	color: #000;
	float: right;
	margin-bottom: 30px;
}

.practicum .flex {
	display: flex;
	align-items: flex-end;
    justify-content: space-between;
    width: 90%;
    padding: 5%;
    background: #1a1a1a;
    margin: 0;
    color: #dadada;
    position: relative;
}

.practicum .flex a {color: #dadada; border-bottom: 1px solid #fff}
.practicum .flex a:hover {border: none; color: #dadada}

.practicum .flex .message-block {position: absolute}

@media(min-width: 1651px) {.practicum .flex .message-block {transform: scale(1.15); top: -100px; left: 40px;}}
@media(max-width: 1650px) and (min-width: 1140px) {.practicum .flex .message-block {transform: scale(0.85); top: -150px; left: 40px;}}
@media(max-width: 1139px) and (min-width: 750px) {.practicum .flex .message-block {transform: scale(0.75); top: -190px; left: 40px;}}
@media(max-width: 749px) and (min-width: 550px) {.practicum .flex .message-block {transform: scale(0.55); top: -170px; left: -80px;}}
@media(max-width: 549px) {.practicum .flex .message-block {display: none} .practicum h2 {float: none; text-align: center; font-size: 45px}}

@media(min-width: 851px) {
	.practicum .flex div:first-of-type {width: 50%}
	.practicum .flex div:last-of-type {width: 45%}
}

@media(max-width: 850px) {
	.practicum .flex {
		flex-wrap: wrap;
		flex-direction: column;
	}
	
	.practicum .flex div {width: 100%; margin-top: 15px}
}

.practicum .flex div:first-of-type img {width: 100%}

/* Конец блока с практикумом */

.rezume {
	background: #1a1a1a;
	padding-top: 100px;
	padding-bottom: 50px;
	color: #fff;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.rezume-block {
	width: 90%;
	background: #fff;
	padding: 20px 5%;
	border-radius: 5px;
	position: absolute;
	top: -80px;
	height: 700px;
}

.rezume > div h4 {
	font-size: 34px;
	margin-bottom: 20px;
}

.rezume > div h4 span {color: #F16A51}

.rezume > div .anketa-name {
	color: #333; 
	font-size: 24px;
	display: block;
	margin-top: 20px;
	font-weight: 700;
}

.rezume > div .anketa-position {
	color: #F16A51; 
	font-size: 18px;
	display: block;
	margin-top: 5px;
	font-weight: 700;
}

@media(min-width: 1121px) {
	.rezume > div:last-of-type {max-width: 500px}
	.rezume > div:first-of-type {width: 45%; position: relative; height: 500px}
	
	.rezume > div img {
		float: left;
		margin-right: 20px;
	}
	.rezume > div:last-of-type {padding-left: 50px}
}

@media(max-width: 1121px) and (min-width: 701px) {
	.rezume {justify-content: flex-start}
	
	.rezume > div:first-of-type {
		width: 550px; 
		margin-top: 20px;
		position: relative; 
		height: 500px; 
		order: 2;
	}
	
	.rezume-block img {float: left; margin-right: 20px}
	.rezume > div:last-of-type {order: 1; text-align: right}
	.rezume > div:last-of-type {padding-left: 50px}
}

@media(max-width: 700px) {
	.rezume {justify-content: flex-start}
	
	.rezume > div:first-of-type {
		width: 100%; 
		margin-top: 20px;
		position: relative; 
		top: 80px;
		height: 500px; 
		order: 2;
	}
	
	.rezume-block {height: 650px}
	
	.rezume-block img {float: left; margin-right: 20px}
	.rezume > div:last-of-type {order: 1; text-align: center}
	
	.pointer-hand {transform: rotate(-90deg)}
}

@media(max-width: 550px) and (min-width: 450px) {
	.rezume-block {height: 700px}
	.rezume-block img {width: 112px}
	.rezume-block .clean-mobile {clear: both}
	.rezume > div:first-of-type {height: 550px}
}

@media(max-width: 449px) {
	.rezume-block {height: 750px}
	.rezume-block img {width: 100px}
	.rezume-block .clean-mobile {clear: both}
	.rezume > div:first-of-type {height: 600px}
	
	.rezume > div .anketa-name {
		font-size: 20px;
		margin-top: 10px;
	}
	
	.rezume > div .anketa-position {
		font-size: 16px;
		margin-top: 5px;
	}
}

.rezume > div .anketa-punkt {
	color: #333;
	display: block;
	font-weight: 700;
	font-size: 18px;
	margin-top: 20px;
}

.rezume > div .contact, .rezume > div .main-keys {
	position: relative;
    padding: 0;
    list-style: none;
    line-height: 23px;
    font-weight: 500;
    font-size: .75rem;
    color: #333;
    margin-top: 20px;
}

.rezume > div .contact li, .rezume > div .main-keys li {position: relative}

.rezume > div .contact li::before, .rezume > div .main-keys li:before {
	margin-right: 7px;
    content: '\f111';
    display: inline-block;
    vertical-align: middle;
    font-size: 8px;
    font-weight: 900;
    color: #f16a51;
    font-family: 'Font Awesome 5 Free';
}

.rezume > div .contact li:not(:last-of-type)::after, .rezume > div .main-keys li:not(:last-of-type)::after {
	content: '';
    position: absolute;
    height: 25px;
    left: 188px;
    bottom: -10px;
    border-left: 1px solid #f16a51;
}

@media(max-width: 550px) {.rezume > div .contact li:not(:last-of-type)::after {left: 3px}}

.rezume > div .main-keys li:not(:last-of-type)::after {left: 3px;}

.clean {clear: both}

/* Блок с дипломом */
#diplom {
	padding-top: 200px;
	background: #EFEFEF;
	padding-bottom: 50px;
}

.img-diplom {position: relative}

@media(min-width: 631px) {
	#diplom .heading-diplom {
		position: absolute;
		bottom: 25px;
		left: -50px;
	    margin-right: 5%;
	    -ms-writing-mode: tb-lr;
	    -webkit-writing-mode: vertical-lr;
	    writing-mode: vertical-lr;
	    -ms-transform: rotate(180deg);
	    transform: rotate(180deg);
	    font-weight: 700;
	    font-size: 28px;
	}
}

@media(max-width: 630px) {
	#diplom .heading-diplom {
	    font-weight: 700;
	    font-size: 30px;
	    margin-bottom: 20px;
	}
}

#diplom > div {	
	text-align: center;
	margin: 0 auto;
}

@media(min-width: 831px) {#diplom > div {width: 700px}}
@media(max-width: 830px) and (min-width: 631px) {#diplom > div {width: 500px}}

#diplom img {
	margin-bottom: 20px;
	box-shadow: 6px 10px 20px rgba(156, 156, 156, 0.2);
}

#diplom .txt {text-align: left}

#diplom b {font-weight: 500}
#diplom .info-about-diplom {text-align: left; margin-top: 20px}
#diplom .info-about-diplom b:last-of-type {margin-left: 50px}
#diplom .info-about-diplom span {margin-left: 5px; color: #5c5c5c}

.plan_kursa>div>div.description span {border: none}
.plan_kursa {padding-bottom: 200px;}

/* Блок с отзывами */
.reviews {
	background: #EA8942;
	float: left;
	position: relative;
	padding-top: 50px;
	padding-bottom: 100px;
}

@media(min-width: 701px) {
	.reviews {width: 100%}
	.reviews img.prev-arrow, .reviews img.next-arrow {top: 50%;}
	.reviews .overflow-reviews {padding: 10px;}
	.reviews img.next-arrow {right: -35px}
	.reviews img.prev-arrow {left: -65px}
}

@media(max-width: 700px) {
	.reviews .overflow-reviews {width: 100%; padding-bottom: 80px;}
	.reviews img.prev-arrow {left: 20%; bottom: 0}
	.reviews img.next-arrow {right: 20%; bottom: 0}
}

@media(max-width: 700px) and (min-width: 651px) {.reviews {width: 90%; padding-left: 5%; padding-right: 5%}}
@media(max-width: 650px) {.reviews {width: 100%}}

.reviews img.mess-box {
	position: absolute;
	top: -150px;
	left: 100px;
}

@media(min-width: 1300px) {.reviews img.mess-box {left: 100px}}

@media(max-width: 1299px) {.reviews img.mess-box {
	transform: scale(0.7);
	left: 0;
}}

.reviews img.next-arrow {transform: rotate(180deg)}
.reviews img.prev-arrow {display: none}

.reviews img.prev-arrow, .reviews img.next-arrow {
	position: absolute;
	cursor: pointer;
}

.reviews img.prev-arrow:hover {transform: scale(1.2)}
.reviews img.next-arrow:hover {transform: scale(1.2) rotate(180deg)}

.reviews > h3 {
	color: #8D4A19;
	text-align: center;
}

.reviews .container {
	display: flex;
	justify-content: space-around;
	margin-top: 50px;
}

.reviews .container > div:first-of-type {position: relative;}

@media(min-width: 1051px) {
	.reviews .container > div:first-of-type {width: 45%}
	.reviews .container > div:last-of-type {width: 45%}
}

@media(max-width: 1050px) {
	.reviews .container {flex-direction: column}
	.reviews .container > div {width: 90%; margin-left: 5%}
	.reviews .container > div:first-of-type {margin-bottom: 20px}
}

.reviews .container > div h3 {
	color: #8D4A19;
	font-size: 35px;
	margin-bottom: 15px;
}

.reviews .container > div p {color: #361B07; margin-bottom: 20px}
.reviews .container > div p a {color: #361B07; border-bottom: 1px solid #361b07;}
.reviews .container > div p a:hover {border: none}

.reviews .overflow-reviews {
	overflow: hidden; 
	width: 90%;
}

.reviews .all-reviews {width: 2400px; position: relative; left: 0; transition: left 500ms ease}

.reviews .all-reviews .one-review {
    background: #fff;
    border-radius: 30px;
    padding: 15px;
    float: left;
    margin-right: 40px;
    box-shadow: 0px 0px 6px 1px #B16229;
}

@media(min-width: 651px) {.reviews .all-reviews .one-review {width: 300px}}
@media(max-width: 650px) {.reviews .all-reviews .one-review {width: 200px}}

.reviews .all-reviews .one-review img {float: left}

.reviews .all-reviews .one-review .name {font-weight: 500; margin-top: 15px; margin-left: 10px; display: inline-block; color: #000}
.reviews .all-reviews .one-review p {clear: both; margin-top: 10px; float: left}
.reviews .all-reviews .one-review p span {color: #C92828; font-weight: 500; cursor: pointer}
.reviews .all-reviews .one-review p span:hover {border-bottom: 1px solid #C92828}

/* Блок с проектами курса */
.course-projects {
	text-align: center;
	background: #EFEFEF;
	float: left;
	padding-top: 50px;
	padding-bottom: 100px;
}

.course-projects h3 {color: #000}

.course-projects p {color: #8097AD; margin-top: 15px}

.course-projects > div {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 25px;
}

@media(min-width: 1301px) {.course-projects > div {width: 70%; margin-left: 15%}}
@media(max-width: 930px) {
	.course-projects > div {flex-direction: column}
	.course-projects > div > div:not(:first-of-type) {margin-top: 50px}
}
@media(min-width: 931px) {.course-projects>div>div:not(:first-of-type) {margin-left: 15px}}

.course-projects > div > div {
	position: relative; 
	cursor: pointer;
	display: flex;
    align-items: center;
    justify-content: center;
}

.course-projects > div > div > i {
	position: absolute;
    color: #fff;
    font-size: 50px;
    transition: font-size 200ms ease;
}

.course-projects > div > div > div {
	position: absolute;
	height: 99%;
	width: 100%;
    background: #1c1c1c;
    opacity: .8;
    transition: opacity 500ms ease;
}

.course-projects > div > div:hover > div {opacity: 0.45}
.course-projects > div > div:hover > i {font-size: 80px}

.course-projects > div img {max-height: 300px}
.course-projects.java > div img {max-width: 300px}

#first-project, #second-project, #third-project {padding-bottom: 0}
#first-project iframe, #second-project iframe, #third-project iframe {margin-top: 20px}

/* Оплата блок */
.payment .sale h4 {
	margin-bottom: 20px;
	font-size: 24px;
	color: #e6e6e6;
}

.payment .sale h4:last-of-type {
	font-size: 20px;
	color: #938296;
}

.payment .sale b {color: #E06149}

.payment .fix-price {margin-bottom: 10px}
.payment .hint {font-weight: 400}
.payment .hint a {font-weight: 500}
.payment .hint a:hover {color: #fff}

@media (max-width: 900px) {
	.overflow {height: 1220px}
	.payment {padding-bottom: 0}
	
	.payment .hint.last {
	    position: relative;
		top: -50px;
	}
	
	.payment ::-webkit-scrollbar {width: 0px}
	.payment ::-webkit-scrollbar-thumb {background: transparent}
}

#free_sale_block {
    text-align: center;
    position: relative;
    top: 10px;
}

#free_sale_block i {margin-left: 3px; transition: all 500ms ease;}
#free_sale_block > div:hover i {margin-left: 8px; transform: rotate(180deg)}

#free_sale_text {display: none}

@media(max-width: 900px) {
	#free_sale_block {margin-bottom: 40px;}
	#tarrifs p.hint#free_sale_text {margin-top: 80px}
}

@media(max-width: 625px) {#free_sale_heading {font-size: 40px; margin-top: 0} #free_sale_heading svg {display: block; margin: 0 auto}}

#free_sale_text .videos {display: flex}
#free_sale_text .videos h4 {
	margin-top: 25px;
    margin-bottom: 15px;
    color: #928195;
    font-size: 27px;
}

#free_sale_text .main-video {
	width: 350px;
	padding-right: 50px;
	margin-right: 50px;
	position: relative;
}

#free_sale_text .fa-arrow-alt-circle-right {color: #ffc007}
#free_sale_text .fa-arrow-alt-circle-right:hover {color: #e06249}

#free_sale_text .main-video iframe {
	width: 100%;
	height: 197px!important;
}

#free_sale_text .main-video .divider {
	position: absolute;
	height: 150px;
	width: 2px;
	background: #918295;
    top: 35%;
	left: 100%;
}

#free_sale_text .all-video-reviews iframe {
	width: 350px;
	height: 197px!important;
}

@media(max-width: 900px) {
	#free_sale_text .videos {
		margin-bottom: 50px;
	}
}

@media(max-width: 760px) {
	#free_sale_text .videos {flex-direction: column}
	#free_sale_text .main-video .divider {display: none}
	#free_sale_text .all-video-reviews iframe, #free_sale_text .main-video {
		width: 100%;
		padding: 0;
		margin: 0;
	}
}