@import url('../common/fontello/css/fontello.css');

:root {--main-color: #01829A; --main-dark-color: #0E6474; --main-light-color: #D9FDFD; --main-middle-color: #77c5d3; --font-main-size: 18px; --font-main: 'Montserrat', sans-serif; --font-hdr: 'Noto Serif', sans-serif; --font-news: 'Noto Serif', serif;}

html, body	{width: 100%; height: 100%; padding: 0; margin: 0; }
body	{ background: #fff; width: 100%; font-size: 18px; font-family: var(--font-main); color: var(--main-dark-color);}
td, th {font-size: 15px;}
p {margin: 0 0 1em 0;}

* {box-sizing: border-box; max-width: 100%;}

.wrap {width: 1200px; margin: 0px auto; position: relative;}

.f20 {font-size: 20px;}
.f28 {font-size: 28px;}
.f32 {font-size: 32px;}
.f36 {font-size: 36px;}
.f44 {font-size: 44px;}
.f66 {font-size: 66px;}


.w50p {width: 50%; float: left;}
.w33p {width: 33.3%; float: left;}

.pdv10 {padding: 10px 0 !important;}
.pdv20 {padding: 20px 0 !important;}
.pdv40 {padding: 40px 0 !important;}
.pdh10 {padding: 0 10px !important;}
.pdh20 {padding: 0 20px !important;}

.pdt20 {padding-top: 20px;}
.pdt40 {padding-top: 40px;}
.pdl40 {padding-left: 40px;}

.mrb10 {margin-bottom: 10px;}
.mrb20 {margin-bottom: 20px;}

.mt-20 {margin-top: -20px;}

.bold {font-weight: bold;}

.block  {display: block;}
.iblock {display: inline-block;}

.fleft  {float: left;}
.fright {float: right;}
.clear {clear: both;}
.clearfix::after {content: ""; clear: both; display: table;}

.upp {text-transform: uppercase;}

.ovfh {overflow: hidden;}

.anim {opacity: 0;}

h1, h2, h3, h4, h5, h6 {margin: 0 0 .8em 0;}
h1 {font-weight: bold; font-size: 36px; margin: 0; padding: 10px 0 25px 0; text-align: center;}

.cnt, .cnt * {text-align: center;}

.ani, .ani * {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}


header {padding: 20px 0 10px; border-top: 10px solid var(--main-color); background: var(--main-light-color);}
header div {position: relative;}
#logo {width: 300px; height: 80px; background: url(../img/psy.svg) left center no-repeat; color: #01829A; padding-left: 90px; font-weight: bold; font-size: 16px; float: left; margin-right: 70px;}
#logo span {display: block;}
#logo span:nth-child(2) {font-size: 20px;}
#logo span:nth-child(3) {font-size: 12.5px;}
.ua #logo span:nth-child(3) {font-size: 12px;}
#logo span:nth-child(4) {font-size: 20px; color: #0e6474;}
#hdr-01 {float: left; font-size: 36px; margin-top: 25px; color: var(--main-color); z-index: 5;}
#hdr-02 {position: absolute; top: -20px; left: 480px; width: 300px; height: 32px; background: var(--main-color) url(../img/psy-02.png) right center no-repeat;}
#hdr-02 a {color: #fff; position: relative; top: -13px; padding: 1px 0; border-radius: 3px; font-size: 22px; margin: 0 2px;}
#hdr-02 a:hover {color: var(--main-color); background: #fff;}

#hdr-03 {position: absolute; z-index: 1; top: 20px; right: 0px; width: 260px; height: 72px; background: var(--main-color); padding: 13px 0 17px 45px; text-align: center; border-radius: 20px;}
#hdr-03:hover {background: var(--main-dark-color);}
#hdr-03 a {color: #fff; text-decoration: none;}
#hdr-03 span {display: block;}
#hdr-03 span:nth-child(3) {font-size: 20px; font-weight: bold;}
#hdr-03 i {position: absolute; top: 6px; left: 5px; font-size: 48px;}
#hdr-04 {position: absolute; top: -12px; right: 75px; color: var(--main-dark-color); text-decoration: none;}
#hdr-04:hover {text-decoration: none;}

.colorBG {background: var(--main-light-color); padding: 40px 0;}
.patternBG {background: url(../img/swirl_pattern.png); color: #fff; padding: 40px 0;}
.colorStrip {height: 10px;}
.colorStrip.cSmain {background: var(--main-color);}
.colorStrip.cSwhite {background: #fff;;}

#testimonials {text-align: center; max-width: none; width: 800px;}
#testimonials img {border: 4px solid var(--main-color); border-radius: 50%; margin-bottom: 10px;}
#testimonials1 {list-style: none; margin: 0; padding: 0; 1height: 200px; overflow: hidden;}
#testimonials1 li {float: left; width: 100%; margin: 0; padding: 0;}

.tLeft  {font-size: 120px; display: inline-block; line-height: .75; float: left; margin-right: 10px; font-family: Pragmatica, Arial, Helvetica;}
.tRight {font-size: 120px; display: inline-block; line-height: .75; float: right; margin-left: 10px; font-family: Pragmatica, Arial, Helvetica;}

.flex {display: flex; justify-content: center;}
.flex-card {width: 25%; border: 1px solid var(--main-middle-color); border-radius: 10px; margin: 0 20px; background: #fff; padding: 25px; text-align: center; cursor: pointer;}
.flex-card img {width: 80%; border: 4px solid var(--main-middle-color); border-radius: 50%; margin: 0 auto 10px; display: block;}
.flex-card:hover, .flex.show .flex-card:hover, .flex.show .flex-card.show {box-shadow: 0 0 50px var(--main-middle-color); transform: scale(1.05); opacity: 1;}
.flex-card b {display: block; margin: 10px 0 0;}
.flex.show .flex-card {opacity: .35;}
.tutor-info {text-align: center; margin: 20px 0 0; padding: 20px 0 0; display: none;}
.tutor-gallery {margin: 10px 0 0; padding: 10px 0 0;}
.tutor-gallery img {border: 1px solid #fff;}
.tutor-gallery a:hover img {transform: scale(0.95); box-shadow: 0 0 20px var(--main-middle-color);}

#txt-01 {float: left; width: 500px; padding: 30px 20px 20px 30px; margin: 30px 0 0 100px; background: var(--main-light-color); border-radius: 20px; font-size: 20px;}
#txt-01 p {margin: 0; padding: 0 0 18px 50px; background: url(../img/checkmark_icon.png) left top no-repeat;}

#txt-02 {margin: 30px 0; font-weight: bold;}
#txt-02 p {margin-bottom: 30px;}
#txt-02 p:first-letter {font-size: 50px; float: left; margin: -10px 10px 0 0; color: var(--main-middle-color);}
#txt-02 span {display: block; font-weight: normal; margin: 10px 0;}

.col {float: left; padding: 0 25px; width: 50%; position: relative;}

#txt-03 {margin-bottom: 30px;}
#txt-03 .col1 {width: 65%;}
#txt-03 .col2 {width: 35%; background: #fff; border-radius: 20px; height: 240px; color: var(--main-dark-color); padding: 20px 20px; text-align: center;}
#txt-03 li {margin-bottom: 10px;}

#txt-04 .wrap {width: 1100px;}
#txt-04 p {margin: 10px 20px;}

#txt-05 {margin: 40px 0;}
#txt-05 .wrap {width: 430px;}
#txt-05 .wrap div {background: var(--main-color); border-radius: 20px; color: #fff; padding: 30px 30px; text-align: center;}

#txt-06 {padding: 30px 0 50px; text-align: center; background: var(--main-light-color);}

.qurve  {width: 100%; height: 100px; background: url(../img/qurve.svg) center center no-repeat;  background-size: cover; margin-top: -50px;}
.qurve2 {width: 100%; height: 100px; background: url(../img/qurve2.svg) center center no-repeat; background-size: cover; margin: 0;}

.bgMiddle {margin: 20px 0; background: var(--main-color); border-radius: 20px; color: #fff; padding: 50px 30px;}

.buttReg {border-radius: 10px; padding: 10px 20px; background: var(--main-color); color: #fff; text-decoration: none; font-weight: bold; font-size: 20px; margin: 5px 0; display: inline-block;}
.buttReg:hover {background: var(--main-dark-color); transform: scale(1.1); box-shadow: 0 0 50px var(--main-middle-color);}

#txt-05 .buttReg {background: #fff; color: var(--main-color);}
#txt-05 a.link {color: #fff; border-bottom: 1px dotted #fff;}

a.link {color: #36d; border-bottom: 1px dotted #36d; text-decoration: none;}
a.link:hover {color: #c00; border-bottom: 1px solid #c00;}

.arrow {position: absolute; width: 100px; left: -30px; top: 100px; animation: arrow-pulse 1.2s infinite ease-out;}
@keyframes arrow-pulse {0% {transform: scale(1);} 50% {transform: scale(1.1);} 70% {transform: scale(0.95);} 100% {transform: scale(1);}}

.pcBreak {display: block;}



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

}

@media only screen and (max-width: 340px) {
	h3 {font-size: 19px;}

}

@media only screen and (max-width: 640px) {
	.wrap {width: 90%;}
	#logo {float: none; margin: 20px auto;}
	#hdr-01 {float: none; text-align: center; font-size: 30px;}
	#hdr-02 {position: static; margin: -20px auto 10px auto;}
	#hdr-03 {position: static; margin: 10px auto;}
	#hdr-04 {position: static; text-align: center; display: block; margin: 0 auto; width: 120px;}
	.qurve {display: none;}
	.mt-20 {margin: 0;}
	.col {float: none; width: 100%; padding: 0;}
	#txt-01 {float: none; width: 100%; margin: 0 0 20px; padding: 30px 20px 20px 20px; font-size: 17px;}
	#txt-01 p {background-size: 25px; padding: 0 0 18px 40px;}
	#txt-02 {margin: 30px 0 0 0;}
	#txt-02 p:first-letter {font-size: 40px; margin: -5px 10px 0 0; }
	#txt-03 .col1, #txt-03 .col2 {width: 100%;}
	#txt-03 .col1 {padding: 0 20px; margin-bottom: 25px; font-size: 17px;}
	#txt-03 .col2 {height: 280px;}
	.bgMiddle {padding: 20px 0;}
	.bgMiddle h2 {font-size: 22px;}
	h1 {font-size: 32px;}
	.arrow {width: 60px; left: -10px; top: 140px;}
	.pcBreak {display: inline;}
	.flex {display: block;}
	.flex-card {margin: 0 auto 20px; width: 90%;}
	.flex.show .flex-card {display: none;}
	.flex.show .flex-card.show {display: block;}
}

@media only screen and (max-width: 1020px) {
	.wrap {width: 90%;}

}