@font-face {
  font-family: 'My/static/fonts/MuseoCyrl100';
  src: url('../fonts/MuseoCyrl100.eot'); /* IE9 Compat Modes */
  src: url('../fonts/MuseoCyrl100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/MuseoCyrl100.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/MuseoCyrl100.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/MuseoCyrl100.svg#svgFontName') format('svg'); /* Legacy iOS */
}

html, body {
	width: 100%;
	height:100%;
	padding: 0px;
	margin: 0px;
	font-family: 'My/static/fonts/MuseoCyrl100';
}

body {
	background: #fff;
}

h1, h2, h3 {
	font-family: 'My/static/fonts/MuseoCyrl100';
	font-weight: normal;
}

h4 {
	text-transform: uppercase;
	font-size:12px;
	/*background: #262626;
	color: #ebebeb;*/
	color: #262626;
	display: inline-block;
	padding: 10px 50px 0 5px;
	line-height:20px;
}

h4 {

}

a {
    cursor: pointer;
    color: #736957;
    text-decoration: underline;
    font-weight: bold;
}

a:hover {
	text-decoration: none;
}

ul {
	display:inline-block;
}

ul li {
	list-style:none;
	display:inline-block;
}

/**/

i.discount {
	background: #01b601;
    color: #fff;
    display: inline-block;
    padding: 0;
    min-width: 45px;
    line-height: 45px;
    border-radius: 45px;
    font-size: 17px;
    box-shadow: 3px 3px 15px -5px black;
}

/**/

h1.top {
	color: #1b1b1a;
	font-size:30px;
	font-weight:bold;
	margin:30px 0;
}

h2 {
	color: #1b1b1a;
	font-size:16px;
	font-weight:bold;
	margin:10px 0 40px 0;
}

h1.top:before {
    content: "";
    display: block;
    width: 5000px;
    height: 1px;
    background: #d1cfca;
    position: relative;
    top: 17px;
    left: -5030px;
}

p.main {
	width:500px;
	color: #959391;
	font-size:14px;
	line-height:16px;
	text-align:justify;
}

a.lil {
	display:inline-block;
	color:#9a9995;
	font-style:italic;
	padding:7px 15px;
	background: #1b1b1a;
	font-size:12px;
}

a.lil:hover {
	color: #cfcdc4;
}

p.bukvitsa:first-child::first-letter {
	font-size: 36px;
	font-weight:bold;
	display:inline-block; /* Размер буквы */
	padding:0px 10px 0 0;
	color: #969084; /* Цвет буквы */
	float: left; /* Выравнивание по левому краю */
	margin: 10px 2px 2px -3px; /* Отступы вокруг буквы */
}

p.bukvitsa {
	color: #969084;
	line-height:22px;
	font-size:14px;
	text-align:justify;
	margin:30px 0;

	width: 500px;
}

a.buy {
	background: #EB185F;
    color: #fff;
}

a.buy:hover {
	color: #fff;
}

span.price {
	text-decoration: underline;
    color: #3d3535;
    background: #e4dbca;
    display: inline-block;
    padding: 3px;
}

a.slider_brush {
	border-radius:150px;
	display:inline-block;
	overflow:hidden;
	width:150px;
	height:150px;
	box-shadow: 3px 3px 23px -7px #71654b;
}

a.slider_brush img {
	border: 0px;
	width:150px;
}
/**/

.cnt-box {
}

.cnt-box.top-slide {
	height:100vh;
	background: #e6e3dd url(../images/sokolova-brush.jpg) right top no-repeat;
	background-size: auto 100%;
	min-height: 700px;
    position: relative;
}

.cnt-box.top-slide .cnt {
	padding:150px 0;
}

.cnt-box.info-line {
	background: #202225;
	padding:30px 0;
}

.info-line ul {
	text-align:center;
	display:block;
	margin:0 auto;
}

.info-line ul li {
	width:20%;
	text-align:center;
}

.info-line li a {
	color: #8c8886;
	font-size:24px;
	display: inline-block;
}

.info-line li a:hover {
	color: #dec4b8;
}

.cnt {
	width:100%;
	max-width:900px;
	margin:0 auto;
	padding:100px 0;
}

/**/

a.groups {
	font-weight: normal;
    display: inline-block;
    margin-right: 115px;
}

a.groups:hover span.group-top-slide:after  {
	opacity:0;
}

a.groups:hover span.group-top-slide i {
	background: none;
}

a.groups img {
	height:10vh;
	box-shadow: none;
	position:relative;
	top:50px;
}

a.groups img:before {
	content:"";
	display:block;
	margin:30px;
	width:50px;
	height:50px;
	background: #000;
}

a.groups:hover img {

}

span.group-top-slide {
	position:relative;
	display: inline-block;
}



/**/

.cnt-box.top-menu {
	background: #f0eee9;
	color: #736d60;
}

.cnt-box.top-menu .cnt {
	padding: 20px 0;
	min-height:24px;
	line-height:24px;
	/*background: url('') center no-repeat;*/
	background-size: auto 50%;
	position:relative;
}

.cnt-box.top-menu .cnt:before{
    position:absolute;
    left:0;
    bottom:0;
    top:0;
    right:0;
    content:"";
    background: url('/static/images/logo.png') center no-repeat;
    background-size:auto 50%;
    opacity:0.4;
}

.cnt-box.top-menu li {
	margin-right:30px;
}

.cnt-box.top-menu ul,
.cnt-box.top-menu span {
	position:relative;
}

.cnt-box.top-menu .cnt span.basket a {
	font-size: 18px;
	color: #000;
	line-height:14px;
    text-decoration: none !important;
}

.cnt-box.top-menu .cnt span.basket a:hover i.num {
	background: #EB185F;
}

span.basket {float:right}

span.basket i.reload_basket,
span.basket i.image {
	display:inline-block;
	position:relative;
	top:3px;
	width:20px;
	height:20px;
	background: center no-repeat;	
	background-size: 100%;
	border:0;

}
span.basket i.image {background-image: url('/static/images/icons/basket.png');}
/*span.basket i.reload_basket {background-image: url('/static/images/icons/error_reload.png'); cursor:pointer;}*/
span.basket i.reload_basket {background-image: url('http://www.myiconfinder.com/uploads/iconsets/256-256-3d287d62ad75afe2da265c3e8e54d8e1-refresh.png'); cursor:pointer;}

span.basket.empty i.image {opacity: 0.5;}
span.basket.empty:hover i.image {opacity: 1;}

i.num {
    background: #9c8f72;
    line-height: 15px;
    min-width: 15px;
    color: #fff;
    text-align: center;
    display: inline-block;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    position: relative;
    top: -20px;
    left: -16px;
}

/**/

.cnt-box.top-slide a.lil {
	margin-top:15px;
}

/**/

.cnt-box.brush-box {
	background-color:#f4f3f1;
	position:relative;
}

.cnt-box.brush-box .flex .my-flex-container {
	min-height: 425px;
}

.cnt-box.brush-box:before {
	content:"";
	position: absolute;
	display: block;
	bottom:0;
	left:0;
	right:0;
	height:550px;
	background: #fff;
}

img {
	box-shadow: 3px 3px 23px -7px #71654b;
}

/**/

.cnt-box.brush-box {
	color: #736d60;
}

.cnt-box.brush-box h1 {
	font-size:30px;
	font-weight:bold;
}

.cnt-box.brush-box h2 {
	font-size:16px;
	line-height:18px;
	font-weight:bold;
}

.cnt-box.brush-box p {
    text-align: justify;
    line-height: 30px;
    color: #736d60;
}

.cnt-box.brush-box i {
	font-size:26px;
}

.flex {
  	display: flex;
	flex-direction: row;
	margin-top:50px;
	position: relative;
}

.my-flex-container {
	margin:0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width:400px;
}

.my-flex-block {
	/*width:300px;*/
	padding:10px 0;
	text-align:center;
}

.cnt-box.brush-box h1.top {
	margin:10px 0 2px;
}

h1.top i {
    color: #806452;
    font-size: larger;
}

/**/

.flex.group-page {
  	display: flex;
	flex-direction: row;
	margin-top:50px;
	position: relative;
}

.flex.group-page .my-flex-container {
	margin:0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width:200px;
}

.flex.group-page .my-flex-container img {
	width:200px;
}

.my-flex-block {
	/*width:300px;*/
	padding:10px 0;
	text-align:center;
}

/**/

.cnt-box.footer {
	background: #202225;
	padding:30px 0;
}

.cnt-box.footer .cnt {
	text-align:center;padding-top:0px;padding-bottom:0px;
}

.cnt-box.footer .cnt a {
	color:#5f5b59;text-decoration:none;display:inline-block;margin:0 10px;font-size:14px;
}

.cnt-box.footer .cnt a:hover {
	color: #ebebeb;
}

/**/

.sets-table {
	position:relative;margin:30px auto; min-width:600px;
}

.sets-table td {
	vertical-align:middle;
	padding:5px 0;"
}

.sets-table td:last-child {
	padding-left:20px
}

.basket-info-block span.img-box,
.sets-table span.img-box {
	display:inline-block;
	width:100px;
	height:100px;
	border-radius:50px;
	overflow:hidden;
	position:relative;
	box-shadow: 3px 3px 23px -7px #71654b;
}

.basket-info-block span.img-box img,
.sets-table .img-box img {
	width:100px;
	position:absolute;
	min-height: 100%;
}

.sets-table p.text {
	line-height:16px;
	margin:5px 0;
	font-size:14px;
}

/**/

.goods-line {
	background: #f0eee9;
	padding: 20px;
	margin: 5px 0;
	position: relative;
	min-height:100px;
}

.goods-line .title-box {
	position: absolute;
	margin-left: 20px;

}

.goods-line .title {
	font-size: 20px;
	line-height: 26px;
}

.goods-line .type {
	margin-top:10px;
	font-size: 10px; 
	background: #c5c5c5; 
	display: inline-block; 
	padding: 2px;
}

.goods-line .price {
	margin: 0 20px;
}

.goods-line .button {
	background: #736956;
	font-style:normal;
	color:#f0eee9;
	text-decoration:none;
	font-size:20px;
	padding: 2px 8px;
	margin: 0 2px;

}

.goods-line .button.delete {
	bottom: 0;
	right: 0;
	font-size:15px;
	position: absolute;
}

.goods-line .sum {
	position: absolute; 
	right: 0; 
	top: 50%; 
	line-height: 30px; 
	margin-top: -15px; 
	margin-right: 20px; 
	font-weight: bold; 
	font-size: 30px; 
	color: #736956;
}

.order-sum-line {
	background: #f0eee9;
    display: block;
    padding: 20px;
    border-top: 3px solid #ea185f;
    position:relative;
}

.order-sum-line .numeric {
	position:absolute;
	right:20px;
	top:20px;
	font-size:24px;
	color: #ea185f;
    font-weight: bolder;
}

.order-sum-line .sub-tx {
	display:block;
	font-size: 12px;
	margin-top:10px;
	max-width:70%;
}

/**/

.form_line span.title {
    display: block;
    margin: 15px 0 5px;
}

.form_line input[type="text"],
.form_line textarea {
    padding: 3px 5px;
    width: 80%;
    line-height: 25px;
    font-size: 18px;
}

.form_line label {
    margin-right: 20px;
}

.form_line label input {
	margin-right:5px;
}

a.send {
	display: block;
    text-align: center;
    margin: 40px 0;
    background: #ed0b5d;
    color: #fff;
    padding: 20px 5px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    width: 80%;
}

a.send:hover {
	background: #cd0850;
}

.backbut { 
	display: inline-block;
    background: #ec185f;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
}

.backbut a { display:inline-block; color:#fff; line-height: 64px; margin:0px; padding:0 20px; }


@media ( max-width: 960px ) {
	.cnt-box.top-menu>.cnt{
		margin-top:40px !important;
	}

	.backbut { 
	    position: absolute;
	    display: block;
	    text-align: center;
	    width: 100%;
	    margin-bottom: 10px;
	}

	.backbut a { line-height: 40px;display: block; }

	.cnt-box.brush-box .flex .my-flex-container {
		min-height: auto;
	}

	.cnt-box.top-slide {
   		background-position: 400px top;
	}

	.cnt {
		padding-left:2% !important;		
		padding-right:2% !important;
		width:96% !important;
	}

	.flex.group-page {
	    flex-direction: column;
	}

	.flex.group-page .my-flex-container {
	    flex-direction: cell;
	    width:100%;
	}

	.my-flex-block {
		width: 100%;
	}

	.flex.group-page .my-flex-container img {
	    width: 96%;
	    max-width: 400px;
	}

	.cnt-box.brush-box h2 {
	    font-size: 22px;
	    line-height: 26px;
	}

	.brush-box .flex.group-page .my-flex-container img {
	    max-height: 400px;
	    width: auto;
	}

	.brush-box .flex.group-page .my-flex-container {
	    margin-bottom: 80px;
	}

	.flex {
	    flex-direction: column-reverse;
	}

	.my-flex-container {
	    width: 100%;
	}

	.sets-table {
		min-width:auto;
		width:100%;
	}

	/**/

	.goods-line .img-box {
	    position: absolute !important;
	    right: 20px;
	    bottom: 20px;
	    left: auto;
	    top: auto;
	}

	.goods-line .title-box {
		position:relative;
		margin-left: 0px;
	}

	.goods-line .price {
		display: block;
	    margin: 10px 0 5px;
	    background: none;
	    padding: 0;
	    text-decoration: none;
	}

	.goods-line .button {
		margin: 2px 10px;
	}

	.goods-line .button.delete {
		margin: 30px 0 0;
		position: relative !important;
	}

	.goods-line .sum {
		position: relative;
	    top: auto;
	    left: auto;
	    display: block;
	    margin: 25px 0 0 0;
	}
}

@media ( max-width: 675px ) {

	.cnt-box.top-menu .cnt {
	    padding-bottom: 50px;
	    position: relative;
	}

	span.basket {
	    display: block;
	    position: absolute !important;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    text-align: center;
	    padding: 5px 0;
	    background: #bcb6af4d;
	}
	/**/

	.cnt-box.brush-box .flex .my-flex-container {
		min-height: auto;
	}

	.cnt {
		padding: 10px 0;
	}
	
	.cnt-box.top-menu .cnt:before {
		background-position: center 5px;
    	background-size: auto 40px;
	}

	.cnt-box.top-menu ul {
		padding-top: 40px;
    	display: block;
	}

	.cnt-box.top-menu li {
	    margin: 0;
	    width: 49%;
	    display: inline-block;
	    text-align: center;
	    font-size: 20px;
	}

	.info-line ul li {
	    width: 96%;
	    text-align: left;
	    padding: 0 2%;
	    font-size: 20px;
	    line-height: 30px;
	}

	.info-line ul li a {
		display: inline-block;
		width:100%;
	}

	.cnt-box.footer .cnt a {
	    margin: 0;
	    font-size: 16px;
	    line-height:30px;
	    text-align:left;
	    display:block;
	}

	p.bukvitsa {
	    width: 100%;
	    color: #676259;
	    line-height: 26px;
	    font-size: 16px;
	}

	.cnt-box.top-slide .cnt {
		padding-top:0;
	}

	.cnt-box.top-slide {
	    background: #E6E3DB;
	    padding-top: 0;
	    height: auto;
	    min-height: auto;
	    padding-top:1px;
	}

	.top-slide h1.top {
	    text-align: center;
	}

	a.slider_brush {
	    border-radius: 200px;
	    display: block;
   		margin: 0 auto;
	    width: 200px;
	    height: 200px;
	}

	a.slider_brush img {
	    width: 200px;
	}

	p.main {
    	width: 96%;
	}

	.top-slide p.main {
    	width: 96%;
	    position: relative !important;
	    bottom: auto !important;
	    margin-top: 50px;
	    color: #2f2424;
	    font-size: 24px;
	    line-height: 30px;
	}

	.top-slide a.lil {
	    display: block;
	    font-style: italic;
	    padding: 12px 15px;
	    font-size: 16px;
	    text-align: center;
	}

	.top-slide a {
	    display: block;
	    font-style: italic;
	    padding: 12px 15px;
	    font-size: 16px !important;
	    text-align: center;		
	}

	.top-slide a.slider_brush {
		padding:0;
	}

	.top-slide a.lil {
	    color: #513c2c;
	    background: #c7c3b6;
	}

	.top-slide a.lil:hover {
		color: #513c2c;
	}	

	/**/

	.form_line input[type="text"],
	.form_line textarea {
	    padding: 3px 2%;
	    width: 95%;
	}

	.form_line label {
		display:block;
		margin-right:0;
	}

	a.send {
	    width: 99%;
	}


}