#banner {
	background: url(/images/banners/courses_banner_tiny.png) center no-repeat;
	background-size:cover;
	margin-top: -1px;
	box-shadow: -3px 0px 5px rgba(0,0,0,0.2);
	z-index: 2;
}
#WebBottom {
	margin-top:0px!important;
}
#banner .container {
	/*background: url(/templates/znoua/img/course-promo-pic.png) right bottom no-repeat;*/
	padding-bottom: 60px;
}
h1.top-title {
	font-size: 30px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 25px;
}

div#banner .container {
	padding-top: 55px;
}
ul.subject-icon li {
	display: block;
	width: 10%;
	float: left;
	margin-right: 2%;
	text-align: center;
}
ul.subject-icon li:last-of-type {
	margin-right:0;
}
ul.subject-icon li img {
	width: 55%;
	margin: 0 auto;
	display: block;
}
ul.subject-icon li span {
	/* color:#fff; */
	font-size: 16px;
	line-height: 22px;
}
.wpapper-subject {
}

ul.subject-icon {
	padding-top: 20px;
}


.banner-list {
	color: #fff;
	list-style: none;
	margin: 0px;
	font-size: 14px;
}
.banner-list li {
	display: inline-block;
	width: 90%;
	height: 21px;
	line-height: 25px;
	margin-bottom: 5px;
	padding-left: 40px;
	padding-top:4px;
	position: relative;
	font-size: 16px;
}
.banner-list li.ico-4{
	padding-top:0;
}
.banner-list li:before {
	position: absolute;
	content: '';
	width: 30px;
	top: 3px;
	left: 6px;
	height: 21px;
}
.banner-list li.ico-1:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center 0px no-repeat;
}
.banner-list li.ico-2:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -23px no-repeat;
}
.banner-list li.ico-3:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -51px no-repeat;
}
.banner-list li.ico-4:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -80px no-repeat;
}
.banner-list li.ico-5:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -104px no-repeat;
}
.banner-list li.ico-6:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -125px no-repeat;
}
.banner-list li.ico-7:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -150px no-repeat;
}
.banner-list li.ico-8:before {
	background: url(/templates/znoua/img/course-datail-icons.png) center -180px no-repeat;
}
.adit-text {
	height: 110px;
}
.adit-text p {
	line-height: 18px;
}
.adit-text p.bold {
	font-weight: bold;
}
.other-course {
	position: relative;
	background: url(/templates/znoua/img/white-bg.png);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
	margin-bottom: 20px;
}
.other-course span {
	display: table;
	text-align: center;
	font-size: 16px;
	margin: 50px auto 50px 30px;
}
.other-course.c-ukr span {
	margin: 40px auto 40px 30px;
}

.c-math:after {
	content: "";
	display: block;
	width: 127px;
	height: 134px;
	right: 0px;
	bottom: 0px;
	background: url(/templates/znoua/img/math-icon.png);
	position: absolute;
}
.c-hist:after {
	content: "";
	display: block;
	width: 127px;
	height: 134px;
	right: 0px;
	bottom: 0px;
	background: url(/templates/znoua/img/history-icon.png);
	position: absolute;
}
.c-eng:after {
	content: "";
	display: block;
	width: 127px;
	height: 134px;
	right: 0px;
	bottom: 0px;
	background: url(/templates/znoua/img/eng-icon.png);
	position: absolute;
}
.c-ukr:after {
	content: "";
	display: block;
	width: 126px;
	height: 133px;
	right: 0px;
	bottom: 0px;
	background: url(/templates/znoua/img/ukr-icon.png);
	position: absolute;
}
.perevaga {
	margin-top: 40px;
	margin-bottom: 20px;
}
.perevaga .per-num {
	width: 22%;
	float: left;
	font-size: 50px;
	margin-right: 3%;
}
.per-text {
	float: left;
	width: 75%;
	font-size: 16px;
	line-height: 22px;
}



h3.mark {
	line-height: 24px;
}
h3.mark span {
	background-color: yellow;
}

/*.course_promo_price:before {
	content: "";
	height: 60px;
	width: 75px;
	position: absolute;
	top: -1px;
	left: -75px;
	background: url(/images/super-discount-2014-10-precent.png) no-repeat left top;
}*/



/* Скидка */
#doscount-offer {
	position: absolute;
	left: -660px;
	bottom: -340px;
	text-align: left;
}

.span4.offer {
	margin-top: 20px;
}

.offer-title {
	background: #fff;
	display: inline-block;
	padding: 2px 16px;
	border-radius: 5px;
	border: 1px solid #ebebeb;
	margin-bottom: 5px;
}

.offer-info {
	vertical-align: middle;
	margin-bottom: 20px;
}

.offer-info > .icon {
	width: 58px;
	height: 63px;
	display: inline-block;
	vertical-align: middle;
	background: url(/images/discount-for-1.png);
	margin-right: 15px;
}
.offer2 .offer-info > .icon {
	background: url(/images/discount-for-2.png);
}
.offer3-4 .offer-info > .icon {
	background: url(/images/discount-for-3-4.png);
}

.offer-info > .data {
	display: inline-block;
	vertical-align: middle;
}

.offer-info > .data > b {
	color: #f16d20;
}
.offer2 {
	padding-left: 30px;
	width: 270px;
}
.offer3-4 {
	padding-left: 60px;
	width: 240px;
}
.help-offer {
	margin-top: 10px;
	margin-bottom: 25px;
}
.help-offer > font {
	font-weight: bold;
}

.banner-list li.ico-6 {
	/* display:none; */
}
div#other {
	margin-bottom: 50px;
	padding-top: 30px;
}
/* Media Queries */
/* Card sizing */
/* Colors */
/* Calculations */
/* Placeholders */
@media (min-width: 1000px) {
	#timeline .demo-card:nth-child(odd) .head::after, #timeline .demo-card:nth-child(even) .head::after {
		position: absolute;
		content: "";
		width: 0;
		height: 0;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

	#timeline .demo-card:nth-child(odd) .head::before, #timeline .demo-card:nth-child(even) .head::before {
		position: absolute;
		content: "";
		width: 9px;
		height: 9px;
		background-color: #bdbdbd;
		border-radius: 9px;
		box-shadow: 0px 0px 2px 8px #f7f7f7;
	}
}
/* Some Cool Stuff */
.demo-card:nth-child(1) {
	order: 1;
}

.demo-card:nth-child(2) {
	order: 4;
}

.demo-card:nth-child(3) {
	order: 2;
}

.demo-card:nth-child(4) {
	order: 5;
}

.demo-card:nth-child(5) {
	order: 3;
}

.demo-card:nth-child(6) {
	order: 6;
}

/* Border Box */
* {
	box-sizing: border-box;
}

/* Fonts */
body {
	font-family: Roboto;
}

#timeline {
	padding: 80px 0 0 0;
}
#timeline h1 {
	text-align: center;
	font-size: 3rem;
	font-weight: 200;
	margin-bottom: 20px;
}
#timeline p.leader {
	text-align: center;
	margin-bottom: 59px;
	font-size: 26px;
	font-weight: 600;
	line-height: 30px;
}
#timeline .demo-card-wrapper {
	position: relative;
	margin: auto;
}
@media (min-width: 1000px) {
	#timeline .demo-card-wrapper {
		display: flex;
		flex-flow: column wrap;
		width: 940px;
		height: 1860px;
		margin: 0 auto;
		padding-bottom: 40px;
	}
}
#timeline .demo-card-wrapper::after {
	z-index: 1;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	border-left: 1px solid rgb(230, 230, 230);
}
@media (min-width: 1000px) {
	#timeline .demo-card-wrapper::after {
		border-left: 1px solid rgb(230, 230, 230);
	}
}
#timeline .demo-card {
	position: relative;
	display: block;
	margin: 10px auto 80px;
	max-width: 94%;
	z-index: 2;
}
@media (min-width: 480px) {
	#timeline .demo-card {
		max-width: 60%;
		box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
	}
}
@media (min-width: 720px) {
	#timeline .demo-card {
		max-width: 40%;
	}
}
@media (min-width: 1000px) {
	#timeline .demo-card {
		max-width: 420px;
		height: 450px;
		margin: 5px;
		margin-top: 45px;
		margin-bottom: 45px;
	}
	#timeline .demo-card:nth-child(odd) {
		margin-right: 45px;
	}
	#timeline .demo-card:nth-child(odd) .head::after {
		border-left-width: 15px;
		border-left-style: solid;
		left: 100%;
	}
	#timeline .demo-card:nth-child(odd) .head::before {
		left: 461.5px;
	}
	#timeline .demo-card:nth-child(even) {
		margin-left: 45px;
	}
	#timeline .demo-card:nth-child(even) .head::after {
		border-right-width: 15px;
		border-right-style: solid;
		right: 100%;
	}
	#timeline .demo-card:nth-child(even) .head::before {
		right: 459.5px;
	}
	#timeline .demo-card:nth-child(2) {
		margin-top: 245px;
	}
}
#timeline .demo-card .head {
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	font-weight: 400;
}
#timeline .demo-card .head .number-box {
	display: inline;
	float: left;
	margin: 15px;
	padding: 10px;
	font-size: 35px;
	line-height: 35px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.17);
}
#timeline .demo-card .head h2 {
	text-transform: uppercase;
	font-size: 1.3rem;
	font-weight: inherit;
	margin: 0;
	padding-bottom: 6px;
	line-height: 1rem;
	color: #fff;
}
@media (min-width: 480px) {
	#timeline .demo-card .head h2 {
		font-size: 24px;
		color: #fff;
		line-height: 30px;
		padding-right: 5px;
	}
}
#timeline .demo-card .head h2 span {
	display: block;
	font-size: 0.6rem;
	margin: 0;
}
@media (min-width: 480px) {
	#timeline .demo-card .head h2 span {
		font-size: 0.8rem;
	}
}
#timeline .demo-card .body {
	background: #fff;
	border: 1px solid rgba(191, 191, 191, 0.4);
	border-top: 0;
	padding: 15px;
	position: relative;
}
@media (min-width: 1000px) {
	#timeline .demo-card .body {
		height: 365px;
	}
}
#timeline .demo-card .body p {
	margin-bottom: 15px;
	font-size: 14px;
}
#timeline .demo-card .body img {
	display: block;
	width: 93%;
	position: absolute;
	bottom: 14px;
}
#timeline .demo-card--step1, #timeline .demo-card--step5 {
	background-color: #FF915A;
}
#timeline .demo-card--step1 .head::after {
	border-color: #FF915A;
}
#timeline .demo-card--step2 {
	background-color: #8A4A96;
}
#timeline .demo-card--step2 .head::after {
	border-color: #8A4A96;
}
#timeline .demo-card--step3 {
	background-color: #8A2C91;
	margin-top: 26px;
}
#timeline .demo-card--step3 .head::after {
	border-color: #8A2C91;
}
#timeline .demo-card--step4 {
	background-color: #F57429;
}
#timeline .demo-card--step4 .head::after {
	border-color: #F57429;
}
#timeline .demo-card--step5 {
	background-color: #CC33FF;
}
#timeline .demo-card--step6 {
	background-color: #FF6633;
}
#timeline .demo-card--step5 .head::after {
	border-color: #CC33FF;
}
@media screen and (max-width: 768px) {
	#timeline p.leader {
		font-size: 20px;
		margin-bottom: 30px;
	}
	ul.how {
		list-style: none;
	}
	ul.how li {margin-bottom: 25px;}
	ul.how li img {
		float: left;
	}
	.leader-section, #timeline p.leader {
		font-size: 22px;
		margin: 0 0 30px 0;
		line-height: 25px;
	}
	ul.top-offer li {
		line-height: 26px;
		margin-bottom: 5px;
	}
	span.how {
		float: left;
		width: 85%;
	}
	#header {
		height: 100px;
	}
	#mainmenublock .call-back {top: -90px !important;right: 37% !important;}
	.phone.br5 {top: -88px !important;}
	#header .span4 .logo-head {
		width: 45%;
		right: 55%;
	}
	#order_form .container {
		box-shadow: none;
		padding: 0;
	}
	#order_form .slabel {
		margin:25px 0;
		height:auto;
	}
	#mainmenu2 a.go-learn {
	}
	#key1 {
		background: url(/templates/znoua/img/orange-banner.png); ;
	}
	.features-item:last-of-type {
		margin-right:auto;
	}
	.features-item {width: 70%;margin: 0 auto 25px auto;float: none;max-width: 250px;text-align: center;}
	.features-item img {
		float: none;
		max-width: 40%;
		display: block;
		margin: 0 auto;
	}

	.features-item span {
		float: none;
		text-align: left;
		margin-top: 40px;
		width: 100%;
	}
	.span3.wrapper-courses {
		margin: 0 auto 30px auto;
		float: none;
	}
	#order_form .span2.text-right {
		width: 110px;
		text-align: left;
	}
	input.big {
		margin-bottom: 5px;
	}
	#key10 .std-text {
		clear: both;
	}
	div#why-us {
		padding: 0;
	}
	#key10 h2 {
		line-height: 24px;
		font-weight: 500;
	}
}

/*testmonials*/

#online_h2 {
	font-size: 26px;
	font-weight: 600;
	line-height: 30px
}
.gradient {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiM4OTRkOTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlZjc3MWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiM4OTRkOTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(none);
	background: -webkit-gradient(linear,left top,right top,color-stop(20%,#894d93),color-stop(50%,#ef771c),color-stop(80%,#894d93));
	background: -webkit-linear-gradient(left,#894d93 20%,#ef771c 50%,#894d93 80%);
	background: -o-linear-gradient(left,#894d93 20%,#ef771c 50%,#894d93 80%);
	background: -ms-linear-gradient(left,#894d93 20%,#ef771c 50%,#894d93 80%);
	background: linear-gradient(to right,#894d93 20%,#ef771c 50%,#894d93 80%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#894d93', endColorstr='#894d93', GradientType=1);
	background-clip: text;
	-webkit-background-clip: text;
	-o-background-clip: text;
	-ms-background-clip: text;
	color: transparent
}

.my-lovely-std .draggable {
	width: 100%!important;
	margin-left: 20px;
	background-color: #fff
}
.my-lovely-std .slick-next,.slick-prev {
	z-index: 2;
	position: absolute;
	top: 50%;
	display: block;
	width: 57px;
	height: 67px;
	margin-top: -10px;
	padding: 0;
	cursor: pointer;
	border: none;
	outline: 0;
	background: url(/images/icons/marker/nav-right.png) no-repeat
}

.my-lovely-std .slick-prev {
	background: url(/images/icons/marker/nav-left.png) no-repeat;
	display: block;
	height: 69px;
	width: 55px;
	left: 7px
}
.mbot5 {
	margin-bottom: 5px
}

.mbot0 {
	margin-bottom: 0
}

.mbot10 {
	margin-bottom: 10px
}

.mbot15 {
	margin-bottom: 15px
}

.mbot20 {
	margin-bottom: 20px
}

.mbot25 {
	margin-bottom: 25px
}

.mbot30 {
	margin-bottom: 30px
}

.mbot40 {
	margin-bottom: 40px
}

.mbot50 {
	margin-bottom: 50px
}

.mbot70 {
	margin-bottom: 70px
}

.mtop70 {
	margin-top: 70px
}

.border-left {
	border-left: 2px solid #e6e6e6
}

.mleft18 {
	margin-left: 18px
}

.mleft70 {
	margin-left: 70px
}

.mleft90 {
	margin-left: 90px
}

.mleft30 {
	margin-left: 30px
}

.pforp {
	padding: 15px 5px 5px
}

.p5 {
	padding: 5px
}

.p15 {
	padding: 15px
}

.p10 {
	padding: 10px
}

.ptop10 {
	padding-top: 10px
}

.ptop5 {
	padding-top: 5px
}

.pright15 {
	padding-right: 15px
}

.pright25 {
	padding-right: 25px
}

.width250 {
	width: 250px
}

.pleft20 {
	padding-left: 20px
}

.pleft10 {
	padding-left: 10px
}

.pleft15 {
	padding-left: 15px
}

.pbot40 {
	padding-bottom: 40px
}

.pbot70 {
	padding-bottom: 70px
}

.pbot40 {
	padding-bottom: 30px;
}

.m5 {
	margin: 5px
}

.mtop0 {
	margin-top: 0
}

.mtop20 {
	margin-top: 20px
}

.mtop30 {
	margin-top: 30px
}

.mtop40 {
	margin-top: 40px
}

.mtop10 {
	margin-top: 10px
}

.mtop50 {
	margin-top: 50px
}

.mleft0 {
	margin-left: 0!important
}

.mright0 {
	margin-right: 0!important
}

.mleft10 {
	margin-left: 10px
}

.mright10 {
	margin-right: 10px
}

.mleft15 {
	margin-left: 15px
}

.-mleft15 {
	margin-left: -15px
}

.-mtop5 {
	margin-top: -5px
}

.mleft20 {
	margin-left: 20px
}

.mleft5 {
	margin-left: 5px
}

.mleft60 {
	margin-left: 60px
}
#WebBottom {
	margin-top:0;
}
div#form {
	padding-bottom: 70px;
}
ul.how {
	list-style: none;
}
ul.how li {margin-bottom: 5px;}
ul.how li img {width: 35px;margin-right: 10px;}
.purple-material-btn.bottom {
	display: block;
	margin: 0 auto;
	width: 175px;
	text-align: center;
}


/*адаптивность==========================================================*/


@media only screen and (max-width : 1000px) {
	.headline {
		text-align: center;
		margin-bottom: 30px;
	}
	#timeline .demo-card {
		width: 450px;
	}
	#timeline .demo-card .body p {
		margin-bottom: 0;
		display: inline-block;
		width: 49%;
		vertical-align: top;
	}
	#timeline .demo-card .body img {
		display: inline-block;
		width: 49%;
		position: relative; 
		vertical-align: top;
		margin-top: 2%;
	}
	#timeline .demo-card {
		max-width: 500px;
		width: 500px;
	}
	#timeline .demo-card {
		width: 500px;
	}
	#page_main_courses .container{
		width: 80%;
	}
	#banner .container{
		margin: 0 15px;
	}
	.span4 {
		width: 30%;
	}
	#key10 {
		width: 90%;
	}
	#page_main_courses #header {
		width: 95%;
		margin: 0px auto 39px;
	}
	#header .text-right {
		width: 64%;
	}
	ul.subject-icon li {
		display: inline-block;
		width: 10%;
		float: none;
		margin-right: 2%;
		text-align: center;
		vertical-align: top;
		margin: 5px 25px;
	}
	#mainmenublock {
		height: 85px;
		
	}
	.wrapper-item-menu.clearfix {
		float: none;
		width: 90%;
		padding-bottom: 10px;
	}
	#WebBottom {
		min-width: 10px;
	}
	#WebBottom>.container>.row>.span4 {
		width: 100%;
		margin: 30px auto;
	}
	
}

@media only screen and (max-width : 800px) {
	ul.subject-icon li {
		width: 24%;
	}
	.row .perevaga {
		width: 80%;
		margin: 10px auto;
		display: block;
		float: none;
	}
	.perevaga .per-num {
		width: 22%;
		float: none;
		font-size: 50px;
		margin-right: 3%;
		margin: 10px auto;
	}
	.per-text {
		float: none;
		width: 75%;
		font-size: 16px;
		line-height: 22px;
		text-align: center;
		margin: 0 auto 50px;
	}
	#banner .container {
		margin: 0px 30px;
	}
	.headline {
		margin-left: -20px;
	}
	div#other {
		margin-bottom: 0;
	}
	
}

@media only screen and (max-width : 768px) {
	.headline {
		margin: 0 auto 50px;
	}
	#site_heder #header {
		height: 150px;
		margin: 0px auto 60px auto;
		padding-top: 30px;
	}
	#header .span4 a.logo-head {
			right: 46%;
			float: none;
			margin-left: -280px;
			display: inline-block;
			
	}
	body #header .span8.text-right {
		    text-align: center;
			margin: 0;
			margin-top: 0;
			float: right;
	}
	.wrapper-item-menu {
		float: none;
	}
	#adit_things .addition {
		right: 45%!important;
	}
	.where-you {
		margin-left: 10px;
	}
	
}
@media only screen and (max-width : 600px) {
	#timeline .demo-card {
		width: 90%;
	}
	ul.subject-icon li {
		margin: 5px 12%;
	}
}