html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,
nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
time,mark,audio,video{
	margin:0;padding:0;border:0;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;padding:0;margin:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/* start editing from here */
@font-face {
  font-family: 'MuseoSansCyrl-500';
  src: url('/assets/fonts/MuseoSansCyrl-500.eot?#iefix') format('embedded-opentype'),  url('/assets/fonts/MuseoSansCyrl-500.otf')  format('opentype'),
	     url('/assets/fonts/MuseoSansCyrl-500.woff') format('woff'), url('/assets/fonts/MuseoSansCyrl-500.ttf')  format('truetype'), url('/assets/fonts/MuseoSansCyrl-500.svg#MuseoSansCyrl-500') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansCyrl-900';
  src: url('/assets/fonts/MuseoSansCyrl-900.eot?#iefix') format('embedded-opentype'),  url('/assets/fonts/MuseoSansCyrl-900.otf')  format('opentype'),
	     url('/assets/fonts/MuseoSansCyrl-900.woff') format('woff'), url('/assets/fonts/MuseoSansCyrl-900.ttf')  format('truetype'), url('/assets/fonts/MuseoSansCyrl-900.svg#MuseoSansCyrl-900') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {box-sizing: border-box;}

body {background: #fff;overflow: hidden;}
h1 {font-family: 'MuseoSansCyrl-900', Helvetica, Arial, sans-serif;color:#fff;text-transform: uppercase;font-size:35px;}

.container {width:100%; max-width:241px; margin:0 auto;	text-align:center; position:relative; z-index:500;}
.outer {width:241px; height:241px; margin:260px auto; border-radius:120px; box-shadow:0 0 30px rgba(0,0,0,0.3); background:#fff;}
.logo {display:inline-block; position:relative; top:75px;}
.items {width: 100%;margin: 140px auto;display: flex;position: absolute;top: 0;}

a.left-btn {margin-right:2%;}
a.left-btn, a.right-btn {float:left;width:49%}
a.left-btn .cont, a.right-btn .cont {width: 100%;height: 760px; /*border: 1px solid red;*/}

div.left-btn{left: 0;position: absolute;background: #ef9388;}
div.right-btn{right: 0;position: absolute;background:#827ff2;}
div.left-btn, div.right-btn {
	width: 49%;
	/*min-width: 800px;
	min-height: 800px;*/
	height: 100%;
	transition: 1s;
	/*border: 1px solid #000;*/
	padding: 20px;
	top:0
}
div.left-btn:hover, div.right-btn:hover {width: 54%;height: 110%;top:-5%;transition: 1s;z-index:100;}

div.left-btn h1 {position: fixed;width:320px;left: 145px;top: 190px;}
.logo-mc {width: 245px;position: fixed;left: 655px;top: 190px;}
div.left-btn .icon-l {max-width: 628px;width: 100%;top: 306px;position: fixed;left: 107px;}
div.right-btn h1 {position: fixed;right: 400px;/*top: 17.4%;*/top: 190px;}
div.right-btn .icon-r {max-width: 765px;width: 100%;top: 260px;position: fixed;right: 146px;}


@media (max-width: 319px) {
	.container {width: 100%;max-width: 150px;margin: 0;text-align: center;float: right;right: 25px;}
	.outer {width: 150px;height: 150px;margin: 325px auto;border-radius: 120px;box-shadow: 0 0 30px rgba(0,0,0,0.3);background: #fff;}
	.logo {width: 120px;top: 44px;}
	.items {width: 100%;margin: 0px;display: flex;position: absolute;top: 0;}
	a.left-btn, a.right-btn {float: left;width: 100%;margin:0}
	a.left-btn .cont, a.right-btn .cont {width: 100%;height: 400px;}
	a.right-btn {top:800px;}
	div.left-btn {width: 100%;top: 0;}
	div.right-btn {width: 100%;top: 400px;}
	div.left-btn:hover{width: 100%;height: 100%;top:0;transition: 1s;z-index:100;}
	div.right-btn:hover {width: 100%;height: 100%;top:400px;transition: 1s;z-index:100;}
	div.left-btn h1 {top: 45px;left: 25px;}
	.logo-mc {width: 190px;top: 125px;left: 135px;}
	div.left-btn .icon-l {max-width: 260px;top:170px;left: 10px;}
	div.right-btn h1 {position: fixed;top: 445px;right:0;left: 25px;width:250px;z-index:5;}
	div.right-btn .icon-r {max-width: 320px;top: 529px;position: fixed;left: 0;}
}
@media (min-width: 320px) and (max-width: 364px) {
	.container {width: 100%;max-width: 150px;margin: 0;text-align: center;float: right;right: 25px;}
	.outer {width: 150px;height: 150px;margin: 325px auto;border-radius: 120px;box-shadow: 0 0 30px rgba(0,0,0,0.3);background: #fff;}
	.logo {width: 120px;top: 44px;}
	.items {width: 100%;margin: 0px;display: flex;position: absolute;top: 0;}
	a.left-btn, a.right-btn {float: left;width: 100%;margin:0}
	a.left-btn .cont, a.right-btn .cont {width: 100%;height: 400px;}
	a.right-btn {top:800px;}
	div.left-btn {width: 100%;top: 0;}
	div.right-btn {width: 100%;top: 400px;}
	div.left-btn:hover{width: 100%;height: 100%;top:0;transition: 1s;z-index:100;}
	div.right-btn:hover {width: 100%;height: 100%;top:400px;transition: 1s;z-index:100;}
	div.left-btn h1 {top: 45px;left: 25px;}
	.logo-mc {width: 190px;top: 125px;left: 135px;}
	div.left-btn .icon-l {max-width: 260px;top:170px;left: 10px;}
	div.right-btn h1 {position: fixed;top: 445px;right:0;left: 25px;width:250px;z-index:5;}
	div.right-btn .icon-r {max-width: 320px;top: 529px;position: fixed;left: 0;}
}
@media (min-width: 365px) and (max-width: 370px) {
	.container {width: 100%;max-width: 150px;margin: 0;text-align: center;float: right;right: 25px;}
	.outer {width: 150px;height: 150px;margin: 325px auto;border-radius: 120px;box-shadow: 0 0 30px rgba(0,0,0,0.3);background: #fff;}
	.logo {width: 120px;top: 44px;}
	.items {width: 100%;margin: 0px;display: flex;position: absolute;top: 0;}
	a.left-btn, a.right-btn {float: left;width: 100%;margin:0}
	a.left-btn .cont, a.right-btn .cont {width: 100%;height: 400px;}
	a.right-btn {top:800px;}
	div.left-btn {width: 100%;top: 0;}
	div.right-btn {width: 100%;top: 400px;}
	div.left-btn:hover{width: 100%;height: 100%;top:0;transition: 1s;z-index:100;}
	div.right-btn:hover {width: 100%;height: 100%;top:400px;transition: 1s;z-index:100;}
	div.left-btn h1 {top: 45px;left: 25px;}
	.logo-mc {width: 190px;top: 125px;left: 135px;}
	div.left-btn .icon-l {max-width: 260px;top:170px;left: 10px;}
	div.right-btn h1 {position: fixed;top: 445px;right:0;left: 25px;width:250px;z-index: 5;}
	div.right-btn .icon-r {max-width: 345px;top: 529px;position: fixed;left: 10px;}
}
@media (min-width: 371px) and (max-width: 600px) {
	.container {width: 100%;max-width: 150px;margin: 0;text-align: center;float: right;right: 25px;}
	.outer {width: 150px;height: 150px;margin: 325px auto;border-radius: 120px;box-shadow: 0 0 30px rgba(0,0,0,0.3);background: #fff;}
	.logo {width: 120px;top: 44px;}
	.items {width: 100%;margin: 0px;display: flex;position: absolute;top: 0;}
	a.left-btn, a.right-btn {float: left;width: 100%;margin:0}
	a.left-btn .cont, a.right-btn .cont {width: 100%;height: 400px;}
	a.right-btn {top:800px;}
	div.left-btn {width: 100%;top: 0;}
	div.right-btn {width: 100%;top: 400px;}
	div.left-btn:hover{width: 100%;height: 100%;top:0;transition: 1s;z-index:100;}
	div.right-btn:hover {width: 100%;height: 100%;top:400px;transition: 1s;z-index:100;}
	div.left-btn h1 {top: 45px;left: 25px;}
	.logo-mc {width: 190px;top: 125px;left: 135px;}
	div.left-btn .icon-l {max-width: 260px;top:170px;left: 10px;}
	div.right-btn h1 {position: fixed;top: 445px;right:0;left: 25px;width: 61%;z-index: 5;}
	div.right-btn .icon-r {max-width: 350px;top: 529px;position: fixed;left: 10px;}
}
@media (min-width: 601px) and (max-width: 700px) {
	.container {width: 100%;max-width: 150px;margin: 0;text-align: center;float: right;right: 25px;}
	.outer {width: 150px;height: 150px;margin: 150px auto;border-radius: 120px;box-shadow: 0 0 30px rgba(0,0,0,0.3);background: #fff;}
	.logo {width: 120px;top: 44px;}
	.items {width: 100%;margin: 0px;display: flex;position: absolute;top: 0;}
	a.left-btn, a.right-btn {float: left;width: 100%;margin:0}
	a.left-btn .cont, a.right-btn .cont {width: 100%;height: 400px;}
	div.left-btn {width: 100%;height:240px;top: 0;}
	div.right-btn {width: 100%;height:240px;top: 240px;}
	div.left-btn:hover{width: 100%;height: 240px;top:0;transition: 1s;z-index:100;}
	div.right-btn:hover {width: 100%;height: 240px;top:240px;transition: 1s;z-index:100;}
	div.left-btn h1 {top: 25px;left: 25px;}
	.logo-mc {width: 220px;top: 25px;left: 315px;}
	div.left-btn .icon-l {max-width: 169px;top:100px;left: 130px;}
	div.right-btn h1 {position: fixed;top: 265px;right:0;left:25px;}
	div.right-btn .icon-r {max-width: 255px;width: 100%;top: 280px;position: fixed;right: 280px;}
}
@media screen and (min-width: 701px) and (max-width: 800px) {
	.container {width: 100%;max-width: 180px;margin: 0;text-align: center;float: right;right: 25px;}
	.outer {width: 180px;height: 180px;margin: 150px auto;border-radius: 120px;box-shadow: 0 0 30px rgba(0,0,0,0.3);background: #fff;}
	.logo {width:150px;top: 50px;}
	.items {width: 100%;margin: 0px;display: flex;position: absolute;top: 0;}
	a.left-btn, a.right-btn {float: left;width: 100%;margin:0}
	a.left-btn .cont, a.right-btn .cont {width: 100%;height: 400px;}
	div.left-btn, div.right-btn {height: 240px;}
	div.left-btn {width: 100%;top: 0;}
	div.right-btn {width: 100%;top: 240px;}
	div.left-btn:hover{width: 100%;height: 240px;top:0;transition: 1s;z-index:100;}
	div.right-btn:hover {width: 100%;height: 240px;top:240px;transition: 1s;z-index:100;}
	div.left-btn h1 {top: 25px;left: 25px;}
	.logo-mc {width: 220px;top: 25px;left: 500px;}
	div.left-btn .icon-l {max-width: 245px;top:30px;left: 275px;}
	div.right-btn h1 {position: fixed;top: 265px;right:0;left:25px;}
	div.right-btn .icon-r {max-width: 255px;width: 100%;top: 280px;position: fixed;right: 280px;}
}
@media screen and (min-width: 801px) and (max-width: 899px) {
	.container {width: 100%;max-width: 170px;margin: 0 auto;text-align: center;position: relative;z-index: 500;}
	.outer {width: 170px;height: 170px;margin:125px auto;}
	.logo {top: 46px;width: 145px;}
	.items {width: 100%;margin: 40px auto;display: flex;position: absolute;top: 0;height: 400px;}
	.logo-mc {width: 195px;top: 160px;left: 135px;}
	div.left-btn .icon-l {max-width: 295px;top:190px;left:15px;}
	div.right-btn .icon-r {max-width: 354px;top: 135px;right:21px;}
	div.left-btn h1 {top: 75px;left: 25px;}
	div.right-btn h1 {right: 15px;top: 75px;}
}
@media screen and (min-width: 900px) and (max-width: 999px) {
	.container {width: 100%;max-width: 170px;margin: 0 auto;text-align: center;position: relative;z-index: 500;}
	.outer {width: 170px;height: 170px;margin:185px auto;}
	.logo {top: 46px;width: 145px;}
	.items {width: 100%;margin: 40px auto;display: flex;position: absolute;top: 0;height: 455px;}
	div.left-btn h1 {top: 75px;left: 25px;}
	.logo-mc {width: 195px;top: 160px;left: 185px;}
	div.left-btn .icon-l {max-width: 355px;top:190px;left: 15px;}
	div.right-btn h1 {right: 40px;top: 75px;}
	div.right-btn .icon-r {max-width: 403px;right: 21px;top: 135px;}
}
@media (min-width: 1000px) and (max-width: 1099px) {
	.container {width: 100%;max-width: 200px;margin: 0 auto;text-align: center;position: relative;z-index: 500;}
	.outer {width: 200px;height: 200px;margin:180px auto;}
	.logo {top: 55px;}
	.items {width: 100%;margin: 30px auto;display: flex;position: absolute;top: 0;height: 530px;}
	.logo-mc {width: 215px;top:60px;left: 300px;}
	div.left-btn .icon-l {max-width: 355px;left: 15px;top: 200px;}
	div.right-btn .icon-r {max-width: 450px;right: 21px;top: 155px;}
	div.left-btn h1 {top: 60px;left: 25px;}
	div.right-btn h1 {top: 60px;right: 40px;}
}
@media (min-width: 1100px) and (max-width: 1199px) {
	.container {width: 100%;max-width: 200px;margin: 0 auto;text-align: center;position: relative;z-index: 500;}
	.outer {width: 200px;height: 200px;margin:220px auto;}
	.logo {top: 55px;}
	.items {width: 100%;margin: 119px auto;display: flex;position: absolute;top: 0;height: 565px;}
	div.left-btn h1 {left: 40px;}
	.logo-mc {width: 215px;left: 330px;}
	div.left-btn .icon-l {max-width: 445px;left: 15px;}
	div.right-btn h1 {right: 90px;}
	div.right-btn .icon-r {max-width: 504px;right: 21px;top: 250px;}
}
@media (min-width: 1200px) and (max-width: 1299px) {
	.container {width: 100%;max-width: 220px;margin: 0 auto;text-align: center;position: relative;z-index: 500;}
	.outer {width: 220px;height: 220px;margin:185px auto;}
	.logo {top: 63px;}
	.items {width: 100%;margin: 12px auto;display: flex;position: absolute;top: 0;height: 575px;}
	.logo-mc {top: 50px;width: 215px;left: 330px;}
	div.left-btn .icon-l {max-width: 445px;top: 160px;left: 15px;}
	div.right-btn .icon-r {max-width: 550px;right: 14px;top: 110px;}
	div.left-btn h1 {top: 50px;left: 40px;}
	div.right-btn h1 {top: 50px;right: 130px;}
}
@media (min-width: 1300px) and (max-width: 1399px) {
	.items {width: 100%;margin: 140px auto;display: flex;position: absolute;top: 0;height: 640px;}
	div.left-btn h1 {left: 60px;}
	.logo-mc {left: 355px;}
	div.left-btn .icon-l {max-width: 540px;left: 15px;}
	div.right-btn h1 {right: 169px;}
	div.right-btn .icon-r {max-width: 604px;right: 14px;top: 291px;}
}
@media (min-width: 1400px) and (max-width: 1499px) {
	.logo-mc {top: 115px;left: 400px;}
	.items {margin: 65px auto;}
	.outer {margin:185px auto;}
	div.left-btn .icon-l {top: 233px;max-width: 570px;left: 30px;}
	div.right-btn .icon-r {max-width: 656px;right: 14px;top: 280px;}
	div.left-btn h1 {top: 115px;left: 100px;}
	div.right-btn h1 {top: 115px;right: 220px;}
}
@media (min-width: 1500px) and (max-width: 1599px) {
	.logo-mc {top: 115px;left: 450px;}
	.items {margin: 65px auto;}
	.outer {margin:185px auto;}
	div.left-btn .icon-l {top: 233px;left: 30px;}
	div.right-btn .icon-r {max-width: 656px;right: 34px;top: 280px;}
	div.left-btn h1 {top: 115px;left: 145px;}
	div.right-btn h1 {top: 115px;right: 244px;}
}
@media (min-width: 1600px) and (max-width: 1699px) {
	.logo-mc {top: 115px;left: 500px;}
	.items {margin: 65px auto;}
	.outer {margin:185px auto;}
	div.left-btn .icon-l {top: 233px;left: 70px;}
	div.right-btn .icon-r {max-width: 700px;right: 34px;top: 233px;}
	div.left-btn h1 {top: 115px;left: 145px;}
	div.right-btn h1 {top: 115px;right: 244px;}
}
@media (min-width: 1700px) and (max-width: 1799px) {
	.logo-mc {left: 550px;}
	div.right-btn .icon-r {right: 34px;}
}
@media (min-width: 1800px) and (max-width: 1839px) {
	.logo-mc {left: 600px;}
	div.right-btn .icon-r {right: 100px;}
}
@media (min-width: 1840px) and (max-width: 1880px) {
	div.right-btn .icon-r {right: 125px;}
}