

#epic-words {
	width: calc(560px * 2 - 8px);
	margin: auto;
	display: flex;
	flex-direction: column;
	margin-top: 32px;
	/*margin-bottom: 64px;*/
}

#epic-words .epic-words-row {
	width: 100%;
	display: flex;
	justify-content: flex-end;
} 

#epic-words .left {
	justify-content: flex-start;
	text-align: right;	
}

#epic-words .epic-words-row .epic-words-col {
	padding-left: 80px;
	border-left: solid 8px #C4C4C4;
	width: 560px;
	transition: border-color .5s linear;
}

#epic-words .left .epic-words-col {
	padding-left: 0;
	border-left: 0;
	padding-right: 80px;
	border-right: solid 8px #C4C4C4;
}

#epic-words .left .epic-words-col .epic-words-col-text { 
	float: right; 
}

#epic-words .epic-words-row .epic-words-col .epic-words-col-title {
	font-size: 28px;
	font-family: 'Raleway-Regular', sans-serif;
	margin-bottom: 16px;
}

#epic-words .epic-words-row .epic-words-col .epic-words-col-text { 
	line-height: 26px; 
	max-width: 400px; 
}

@media screen and (max-width: 1112px) {

	#epic-words { width: 100%; }	

	#epic-words .epic-words-row {
		justify-content: flex-start;
		text-align: left;	
	}

	#epic-words .left .epic-words-col {
		padding-right: 0;
		border-right: 0;
		padding-left: 20px;
		border-left: solid 8px #C4C4C4;
	}

	#epic-words .epic-words-row  .epic-words-col { padding-left: 20px; }

	#epic-words .left .epic-words-col .epic-words-col-text { float: none; }

	#epic-words .epic-words-row .epic-words-col .epic-words-col-text { padding-bottom: 40px; }

	#epic-words .epic-words-row:last-child .epic-words-col .epic-words-col-text { padding-bottom: 8px; }

}

@media screen and (max-width: 425px) 
{
	/*#epic-words .epic-words-row .epic-words-col .epic-words-col-title { font-size: 24px; }*/

	#epic-words .epic-words-row .epic-words-col .epic-words-col-text { padding-right: 12px; }

	#epic-words .epic-words-row .epic-words-col .epic-words-col-text { line-height: 22px; }
}










#studing-directions { width: 100%; }

#studing-directions .title {
	font-size: 28px;
	font-family: 'Raleway-Regular', sans-serif;
	margin-bottom: 28px;
}

#studing-directions .lists {
	display: flex;
	justify-content: flex-start;
}

#studing-directions .lists .left {
	width: 460px;
	margin-right: 32px;
}

#studing-directions .lists .right { width: 460px; }


#studing-directions .lists .item {
	display: flex;
	min-height: 44px;
	margin-bottom: 24px;
}

#studing-directions .lists .item .box {
	width: 24px;
	height: 24px;
	align-self: flex-start;
	background-color: white;
	border: solid 1px #4C8FFC;
	margin-right: 8px;
	transition: background-color .2s linear;
}

#studing-directions .lists .item:hover .box { background-color: #4C8FFC; } 

#studing-directions .lists .item .text { align-self: flex-end; }

@media screen and (max-width: 900px) 
{
	#studing-directions .lists { flex-direction: column; }

	#studing-directions .lists .left, #studing-directions .lists .right { width: 100%; }
}


@media screen and (max-width: 425px) 
{
	#studing-directions .title { font-size: 24px; }

	#studing-directions .lists .item .box { 
		width: 20px;
		height: 20px;
	}

	#studing-directions .lists .item { min-height: 36px; }

	#studing-directions .lists { font-size: 16px; }
}








#conclusion { width: 100%; }

#conclusion .text {
	max-width: 560px;
	margin: auto;
	text-align: center;
	line-height: 26px;
	padding: 32px;
	padding-bottom: 44px;
	border: 2px solid #4C8FFC;
	background-color: white;
}

@media screen and (max-width: 425px) 
{
	#conclusion .text { line-height: 22px;  }
}

#conclusion .button {
	text-align: center;
	position: relative;
	top: -32px;
}

#conclusion .background {
	position: absolute;
	left: 0;
    margin-top: 100px;
    z-index: -10;
    width: 100%;
    height: 180px;
    background-image: linear-gradient(#2C346E, #4C8FFC);
}


@media screen and (max-width: 425px) 
{
	#conclusion .text { font-size: 16px; }
}

@media screen and (max-width: 375px) 
{
	#conclusion .text { 
		padding: 20px;
		padding-bottom: 44px;	
	}	
}


#clients { width: 100%; }

#clients .content { display: flex; }

#clients .content .text {
	max-width: 490px;
	margin-right: 12px;
	line-height: 26px;
}

#clients .content .logos {
	width: 100%;
	display: flex;
    top: -60px;
    position: relative;
    height: 300px;
}

#clients .content .logos .arrow {
	width: 60px;
	height: 100%;
	transition: filter .2s linear;
	background-position: center;
	background-repeat: no-repeat;
}

#clients .content .logos .arrow:hover {
	filter: brightness(0.5);
	cursor: pointer;
}

#clients .content .logos .left-arrow {
	background-image: url(/wp-content/themes/twentyseventeen/assets/img/arrow_left.png);
} 

#clients .content .logos .right-arrow {
	background-image: url(/wp-content/themes/twentyseventeen/assets/img/arrow_right.png);
} 

.grid-container {
	padding-left: 32px;
	padding-right: 32px;
	width: 100%;
	height: 100%;
}

.logos-container {
	width: calc(611px - 64px);
	height: 100%;
	position: absolute;
	display: grid;
	/*gap: 1px 1px;*/
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	transition: opacity .2s linear;
}

#logos-1 {
	grid-template-areas: "b-1 b-1 b-2 b-2 b-2 b-2" "b-3 b-3 b-3 b-3 b-4 b-4" "b-5 b-5 b-5 b-6 b-6 b-6";
	opacity: 1;
	z-index: 10;
}

#logos-2 {
	grid-template-areas: "b-1 b-1 b-2 b-2 b-3 b-3" "b-4 b-4 b-4 b-5 b-5 b-5" "b-6 b-6 b-6 b-7 b-7 b-8";
	opacity: 0;
	z-index: -10;
}

#logos-3 {
	grid-template-areas: "b-1 b-1 b-2 b-2 b-2 b-2" "b-3 b-3 b-3 b-5 b-5 b-5" "b-6 b-6 b-6 . . .";
	opacity: 0;
	z-index: -10;
}

#logos-4 {
	grid-template-areas: "b-1 b-1 b-1 b-2 b-2 b-2" "b-3 b-3 b-4 b-4 . ." ". . . . . .";	
	opacity: 0;
	z-index: -10;
}

.logos-container div {
}

.logos-container div .for-hover {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: invert(45%) sepia(85%) saturate(1079%) hue-rotate(197deg) brightness(100%) contrast(98%);
    /*filter: sepia(100%) hue-rotate(190deg) saturate(500%);*/
    transition: filter .2s linear;
}



.logos-container div .for-hover:hover {
    filter:  grayscale(0%);
    cursor: pointer;
}


.b-1  { grid-area: b-1; }
.b-2  { grid-area: b-2; }
.b-3  { grid-area: b-3; }
.b-4  { grid-area: b-4; }
.b-5  { grid-area: b-5; }
.b-6  { grid-area: b-6; }
.b-7  { grid-area: b-7; }
.b-8  { grid-area: b-8; }

#logos-1 .b-1 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/2_1.png); }
#logos-1 .b-2 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/2_2.png); }
#logos-1 .b-3 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/2_3.png); }
#logos-1 .b-4 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/2_4.png); }
#logos-1 .b-5 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/2_5.png); }
#logos-1 .b-6 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/2_6.png); }

#logos-2 .b-1 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_1.png); }
#logos-2 .b-2 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_2.png); }
#logos-2 .b-3 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_3.png); }
#logos-2 .b-4 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_4.png); }
#logos-2 .b-5 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_5.png); }
#logos-2 .b-6 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_6.png); }
#logos-2 .b-7 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_7.png); }
#logos-2 .b-8 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/1_8.png); }

#logos-3 .b-1 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/3_1.png); }
#logos-3 .b-2 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/3_2.png); }
#logos-3 .b-3 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/3_3.png); }
#logos-3 .b-4 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/3_4.png); }
#logos-3 .b-5 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/3_5.png); }
#logos-3 .b-6 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/3_6.png); }

#logos-4 .b-1 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/4_1.png); }
#logos-4 .b-2 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/4_2.png); }
#logos-4 .b-3 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/4_3.png); }
#logos-4 .b-4 .for-hover { background-image: url(/wp-content/themes/twentyseventeen/assets/img/logos/4_4.png); }



@media screen and (max-width: 1200px) 
{
	#clients .content { flex-direction: column; }

	#clients .content .logos {
	    top: 0;
	    height: 300px;
		margin-top: 32px;
	}

	.logos-container { left: calc(50% - (611px - 64px) / 2 + 40px + 32px / 2 - 100px / 2); }
}

@media screen and (max-width: 425px) {

	.grid-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	#clients .content .logos { height: 180px; }

	.logos-container {
		width: calc(100% - 30px * 2 - 12px * 2);
		left: calc(50% - (100% - 30px * 2 - 12px * 2) / 2);
	}

	#clients .content .logos .arrow {
		width: 30px;
		background-size: contain;
	}

	#clients .content .text { line-height: 22px; }

	/*#clients .content .text { font-size: 16px; }*/
}




#person {
	margin-bottom: 128px;
}

#person .background {
	position: absolute;
	left: 0;
	width: 100%;
	margin-top: 100px;
	height: 400px;
	background-color: #4C8FFC;
	z-index: -1;
}

#person .content {
	/*width: 1200px;*/
	/*margin: auto;	*/
	width: 100%;
	display: flex;
}

#person .content .image {
	width: 360px;
	height: 440px;
	background-color: lightgray;
}

#person .content .image .person-img {
	position: absolute;
	width: 360px;
	height: 440px;
	transition: opacity .3s linear;
}

#person-img-1 {
	background-image: url(/wp-content/themes/twentyseventeen/assets/img/kotov1.jpg);

	background-size: cover;
    background-position: top;
}

#person-img-2 {
	background-image: url(/wp-content/themes/twentyseventeen/assets/img/kotov2.jpg);
	
	background-size: cover;
	opacity: 0;
}

#person .content .text {
	margin-top: 120px;
	margin-left: 48px;
}

#person .content .text .title {
	color: white;
	/*font-size: 52px;*/
	/*font-family: 'Raleway-Regular', sans-serif;*/
}

#person .content .text .subtitle {
	color: white;
	opacity: 0.8;
	margin-top: 8px; 
	/*font-size: 28px;*/
	/*font-family: 'Raleway-Regular', sans-serif;*/
}

#person .content .text .border {
	width: 160px;
	border-bottom: solid 4px white;
	margin-top: 16px;
}

#person .content .text .body {
	/*max-width: 700px;*/
	margin-top: 16px;
}

#person .content .text .body div {
	position: absolute;
	transition: opacity .3s linear;
	max-width: 720px;
}

#person-body-2 { opacity: 0; }
#person-body-3 { opacity: 0; }
#person-body-4 { opacity: 0; }

#person .content .text .body div ul {
	list-style: none;
	padding-left: 0;
	color: white;
	/*font-size: 20px;*/
}

#person .content .text .body div ul li { margin-bottom: 12px; }

.person-info-btn {
	width: 60px;
	height: 60px;
	position: absolute;
	background-color: #4C8FFC;
    margin-top: 472px;
    transition: background-color .2s linear;
}

#left-btn {
	border-radius: 0;	
	left: 400px;
}

#right-btn {
	border-radius: 0;	
	left: 460px;
	/*margin-left: -15px;*/
}

.person-info-btn::before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.person-info-btn::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

	background: radial-gradient(ellipse at center, 
		rgba(255, 255, 255, 0.3) 50%, 
		rgba(255, 255, 255, 0) 50%) no-repeat 50%;
	transition: all .3s ease-in-out;
    background-size: 0px 0px;
}

.person-info-btn:hover::after {
	cursor: pointer;
	background-size: 120px 120px;
}

.person-info-btn:hover { background-color: #3A64CE;	}

#right-btn::before { background-image: url(/wp-content/themes/twentyseventeen/assets/img/btn_right.png); }
#left-btn::before { background-image: url(/wp-content/themes/twentyseventeen/assets/img/btn_left.png); }


@media screen and (max-width: 1200px) {

	#person  { margin-bottom: 80px; }

	#person .content {
		background-color: #4C8FFC;
		height: 392px;
	}

	#person .content .image { display: none; }

	#person .content .text {
		margin-top: 40px;
		margin-left: 0;
	}

	#person .content .text .body div ul { font-size: 16px; }

	#person .background { margin-top: 0; }

	.person-info-btn { margin-top: 360px; }

	#left-btn { left: calc(50% - 30px - 30px); }
	#right-btn { left: calc(50% - 30px + 30px); }

}

@media screen and (max-width: 425px) {

	#person .content { height: 400px; }
	#person .background { height: 400px; }

	#person .content .text .title { font-size: 32px; }
	#person .content .text .subtitle { font-size: 20px; }

	#person .content .text .body div { padding-right: 12px; }

	.person-info-btn { margin-top: 372px; }

}

@media screen and (max-width: 320px) {

	#person .content { height: 480px; }
	#person .background { height: 480px; }

	.person-info-btn { margin-top: 452px; }

}