api_g

Running

App Files Files Community

DmitrMakeev commited on Nov 8

Commit

f28bcce

verified ·

1 Parent(s): ad22d22

Update app.py

Browse files

Files changed (1) hide show

app.py +1376 -20

app.py CHANGED Viewed

@@ -1023,26 +1023,1382 @@ MANDALA_TEMPLATE = """
 <html>
 <head>
     <style>
-        /* ТВОИ СТИЛИ ЗДЕСЬ */
-        .container_top { padding-top: 30px; }
-        .details_numbers { margin: 15px 0 0px 0; }
-        /* ... и все остальные твои стили ... */
-        .hexagon { position: relative; width: 400px; height: 400px; }
-        .side { position: absolute; }
-        .line { display: flex; }
-        .romb { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
-        .yellow { background-color: yellow; }
-        .blue { background-color: blue; color: white; }
-        .turquoise { background-color: turquoise; }
-        .pink { background-color: pink; }
-        .orange { background-color: orange; }
-        .violet { background-color: violet; }
-        .red { background-color: red; color: white; }
-        .dark_blue { background-color: darkblue; color: white; }
-        .green { background-color: green; color: white; }
-        .white { background-color: white; border: 1px solid #ccc; }
     </style>
 </head>
 <body>

 <html>
 <head>
     <style>
+.container_top { padding-top: 30px; }
+.details_numbers { margin: 15px 0 0px 0; }
+.details_numbers br { clear: both; }
+.result { margin: 40px 0 40px 0; }
+.one_letter { width: 16px; font-size: 16px; display: inline-block; /* float: left; */  }
+.bword { font-weight: bold; }
+.smenu { margin: 0 auto 20px auto; width: 100%; }
+.btn.disabled{ }
+.hid { display: none!important; }
+.clear { clear: both; }
+.graphs { margin: 20px 0 0 0; }
+.graph_numbers { /* float: left; */  }
+.graph_colors { /* float: left;  margin: 0 40px 0 0;*/}
+.well-align { margin:auto; width: 490px; }
+.method_light { border-left: 1px #000 solid; border-top: 1px #000 solid; margin: auto;}
+.graph_numbers .method_light tr td { width: 18px; }
+.method_light tr td { border-right: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align: middle; text-align: center; }
+.method_light tr td.decart_gorizont { border-bottom: 3px #000 solid!important; }
+.method_light tr td.decart_vertical { border-right: 3px #000 solid!important; }
+.graph_colors .method_light { border-left: 1px #000 solid; border-top: 1px #000 solid;  }
+.graph_colors .method_light tr { padding: 0px; margin: 0px; }
+.graph_colors .method_light tr td { padding: 0px; margin: 0px; border-right: 1px #000 solid; border-bottom: 1px #000 solid; }
+.no-border .method_light, .no-border .method_light tr td {
+	border: 0px!important;
+}
+.cell, .cell_noresize { text-align: center; display: block; width: 18px; height: 18px; }
+.cell_noresize { border: 1px #ccc solid; }
+.white { color: #ffffff; background-color: #ffffff; }
+.red { color: #ff0000; background-color: #ff0000; }
+.dark_blue { color: #0000ff; background-color: #0000ff; }
+.green { color: #336600; background-color: #336600; }
+.yellow { color: #ffff00; background-color: #ffff00; }
+.blue { color: #0099ff; background-color: #0099ff; }
+.turquoise { color: #00ffff; background-color: #00ffff; }
+.pink { color: #ff00ff; background-color: #ff00ff; }
+.orange { color: #ff9900; background-color: #ff9900; }
+.violet { color: #9900ff; background-color: #9900ff; }
+@media print {
+	.white { color: #ffffff!important; background-color: #ffffff!important; }
+	.red { color: #ff0000!important; background-color: #ff0000!important; }
+	.dark_blue { color: #0000ff!important; background-color: #0000ff!important; }
+	.green { color: #336600!important; background-color: #336600!important; }
+	.yellow { color: #ffff00!important; background-color: #ffff00!important; }
+	.blue { color: #0099ff!important; background-color: #0099ff!important; }
+	.turquoise { color: #00ffff!important; background-color: #00ffff!important; }
+	.pink { color: #ff00ff!important; background-color: #ff00ff!important; }
+	.orange { color: #ff9900!important; background-color: #ff9900!important; }
+	.violet { color: #9900ff!important; background-color: #9900ff!important; }
+}
+.hide, .mob-only { display: none;}
+.show { display: block; }
+.print { margin: 40px auto; }
+.one_color {}
+.one_color .cell_noresize { margin-right: 8px; }
+.one_color span { float: left; }
+.one_color p { clear: both; /* padding: 0 37px; */ }
+#word { max-width: calc(100% - 80px); height: 66x; font-size: 20px; }
+.navbar-form-own .btn-default { width: 18%; text-transform: uppercase; }
+.off { display: none; }
+.on { display: block; }
+.numerology_details { }
+.numerology_details tr td { text-align: center; width: 25px; }
+.numerology_details tr td.wc { font-weight: bold; }
+.plinks { margin: 10px 0 0 0; padding: 0px; }
+.plinks li {
+	list-style: none;
+	display: inline-block;
+	margin: 0 20px 0 0;
+	padding: 0px;
+}
+.green_b { background: green!important; }
+.red_b { background: red!important; }
+.point_number { width: 50px; text-align: center; }
+.method_point { margin: auto; }
+.graph_numbers .method_point tr td { width: 16px; height: 16px; vertical-align: middle; font-size: 18px; line-height: 16px; }
+.method_point tr td { vertical-align: middle; text-align: center; }
+.tooltip{
+    position:absolute;
+    z-index:1070;
+    display:block;
+    margin:0;
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    font-style:normal;
+    font-weight:400;
+    line-height:1.5;
+    text-align:left;
+    text-align:start;
+    text-decoration:none;
+    text-shadow:none;
+    text-transform:none;
+    letter-spacing:normal;
+    word-break:normal;
+    word-spacing:normal;
+    white-space:normal;
+    line-break:auto;
+    font-size:.875rem;
+    word-wrap:break-word;
+    opacity:0
+}
+.tooltip.show{
+    opacity:.9
+}
+.tooltip .arrow{
+    position:absolute;
+    display:block;
+    width:.8rem;
+    height:.4rem
+}
+.tooltip .arrow::before{
+    position:absolute;
+    content:"";
+    border-color:transparent;
+    border-style:solid
+}
+.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{
+    padding:.4rem 0
+}
+.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{
+    bottom:0
+}
+.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{
+    top:0;
+    border-width:.4rem .4rem 0;
+    border-top-color:#000
+}
+.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{
+    padding:0 .4rem
+}
+.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow{
+    left:0;
+    width:.4rem;
+    height:.8rem
+}
+.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{
+    right:0;
+    border-width:.4rem .4rem .4rem 0;
+    border-right-color:#000
+}
+.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{
+    padding:.4rem 0
+}
+.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow{
+    top:0
+}
+.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{
+    bottom:0;
+    border-width:0 .4rem .4rem;
+    border-bottom-color:#000
+}
+.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{
+    padding:0 .4rem
+}
+.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow{
+    right:0;
+    width:.4rem;
+    height:.8rem
+}
+.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{
+    left:0;
+    border-width:.4rem 0 .4rem .4rem;
+    border-left-color:#000
+}
+.tooltip-inner{
+    max-width:200px;
+    padding:.25rem .5rem;
+    color:#fff;
+    text-align:center;
+    background-color:#000;
+    border-radius:.25rem
+}
+.glyphicon-exclamation-sign{
+	margin: 10px 10px 0 10px;
+}
+.pad0 { padding: 0px!important;}
+.pad10 { padding: 20px 5px!important;}
+.more-result { margin-top: 10px; text-align: center;  }
+@media (max-width: 414px){
+	.mob-only { display: block; }
+	.well-align { max-width: 100%; }
+	.point_number { margin-top: 10px; }
+	.jumbotron .container {
+		padding: 0px!important;
+	}
+}
+.overflow-auto { overflow: auto; width: 100%; }
+.nowrap { white-space: nowrap; }
+.w100 { text-align: center; margin: 10px 0 0 10px;  }
+.tor_value { font-size: 10px; }
+.nav-pills{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+.tab-ids li a { font-weight: 600; }
+	.navbar-form-own {
+	}
+@media (min-width: 1024px){
+	.tab-ids, .tab-pane .smenu {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	h1, .h1 {
+		font-size: 30px!important;
+	}
+}
+.romb {
+	width: 0;
+	height: 0;
+	border: 11px solid transparent;
+	border-bottom: 19px solid transparent; /* #fff */
+	position: relative;
+	background-color: transparent;
+}
+.romb:after {
+	content: '';
+	position: absolute;
+	left: -11px;
+	top: 19px;
+	width: 0;
+	height: 0;
+	border: 11px solid transparent;
+	border-top: 19px solid transparent; /*#fff; */
+}
+.romb span {
+    position: absolute;
+    top: 11px;
+    left: -3px;
+    /* color: white; */
+    z-index: 2;
+}
+.hexagon.courts {
+	height: 700px;
+	width: 700px;
+	margin: 90px auto 20px;
+}
+.courts .hex {
+    margin-top: 8px;
+    width: 16px;
+    height: 10px;
+}
+.courts .hex:before {
+  content: " ";
+  width: 0; height: 0;
+  border-bottom: 4px solid var(--hex-color);
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  position: absolute;
+  top: -4px;
+}
+.courts .hex:after {
+  content: "";
+  width: 0;
+  position: absolute;
+  bottom: -4px;
+  border-top: 4px solid var(--hex-color);
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+}
+.hexagon.courts .line {
+	margin-top: -4px!important;
+}
+.hexagon.courts .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon.courts .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	z-index: 6;
+}
+.hexagon.courts .side-2 {
+	transform: rotate(30deg);
+    position: absolute;
+    left: 134px;
+    top: 11px;
+	z-index: 5;
+}
+.hexagon.courts .side-3 {
+	transform: rotate(90deg);
+    position: absolute;
+    left: 188px;
+    top: 133px;
+	z-index: 4;
+}
+.hexagon.courts .side-4 {
+	transform: rotate(150deg);
+    position: absolute;
+    left: 118px;
+    top: 247px;
+	z-index: 3;
+}
+.hexagon.courts .side-5 {
+	transform: rotate(210deg);
+    position: absolute;
+    left: -14px;
+    top: 222px;
+	z-index: 2;
+}
+.hexagon.courts .side-6 {
+    transform: rotate(270deg);
+    position: absolute;
+    left: -73px;
+    top: 114px;
+	z-index: 1;
+}
+.hexagon {
+	position: relative;
+/*	max-width: 438px;*/
+	height: 700px;
+	width: 700px;
+	margin: 90px auto 20px;
+}
+.hexagon .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 500px;
+	margin-top: -11px;
+}
+.hexagon .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon .side-2 {
+	transform: rotate(30deg);
+	position: absolute;
+	left: 171px; /* Ð¼ÐµÐ½ÑÐµÑ‚ÑÑ */
+	top: 0px;
+}
+.hexagon .side-3 {
+	transform: rotate(90deg);
+	position: absolute;
+    left: 256px;
+    top: 148px;
+}
+.hexagon .side-4 {
+	transform: rotate(150deg);
+	position: absolute;
+	left: 171px;
+    top: 296px;
+}
+.hexagon .side-5 {
+	transform: rotate(210deg);
+	position: absolute;
+    left: 0px;
+    top: 296px;
+}
+.hexagon .side-6 {
+	transform: rotate(270deg);
+	position: absolute;
+    left: -85px;
+    top: 148px;
+}
+.hexagon.size-6 {
+	position: relative;
+	height: 400px;
+	width: 400px;
+	margin: 90px auto 20px;
+}
+.hexagon.size-6 .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 500px;
+	margin-top: -11px;
+}
+.hexagon.size-6 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon.size-6 .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon.size-6 .side-2 {
+	transform: rotate(30deg);
+	position: absolute;
+	left: 102px;
+	top: 11px;
+}
+.hexagon.size-6 .side-3 {
+	transform: rotate(90deg);
+	position: absolute;
+    left: 114px;
+    top: 66px;
+}
+.hexagon.size-6 .side-4 {
+	transform: rotate(150deg);
+	position: absolute;
+	left: 76px;
+    top: 132px;
+}
+.hexagon.size-6 .side-5 {
+	transform: rotate(210deg);
+	position: absolute;
+	left: 0px;
+    top: 132px;
+}
+.hexagon.size-6 .side-6 {
+	transform: rotate(270deg);
+	position: absolute;
+	left: -38px;
+    top: 66px;
+}
+.hexagon.size-8 {
+	position: relative;
+/*	max-width: 438px;*/
+	height: 400px;
+	width: 700px;
+	margin: 90px auto 20px;
+}
+.hexagon.size-8 .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 500px;
+	margin-top: -11px;
+}
+.hexagon.size-8 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon.size-8 .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon.size-8 .side-2 {
+	transform: rotate(30deg);
+	position: absolute;
+	left: 95px;
+    top: 0px;
+}
+.hexagon.size-8 .side-3 {
+	transform: rotate(90deg);
+	position: absolute;
+    left: 143px;
+    top: 82px;
+}
+.hexagon.size-8 .side-4 {
+	transform: rotate(150deg);
+	position: absolute;
+    left: 95px;
+    top: 164px;
+}
+.hexagon.size-8 .side-5 {
+	transform: rotate(210deg);
+	position: absolute;
+    left: 0px;
+    top: 164px;
+}
+.hexagon.size-8 .side-6 {
+	transform: rotate(270deg);
+	position: absolute;
+    left: -48px;
+    top: 82px;
+}
+.hexagon.size-12 {
+	position: relative;
+	height: 580px;
+	width: 580px;
+	margin: 90px auto 20px;
+}
+.hexagon.size-12 .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 500px;
+	margin-top: -11px;
+}
+.hexagon.size-12 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon.size-12 .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon.size-12 .side-2 {
+	transform: rotate(30deg);
+	position: absolute;
+	left: 133px;
+	top: 0px;
+}
+.hexagon.size-12 .side-3 {
+	transform: rotate(90deg);
+	position: absolute;
+	left: 200px;
+    top: 115px;
+}
+.hexagon.size-12 .side-4 {
+	transform: rotate(150deg);
+	position: absolute;
+	left: 133px;
+    top: 230px;
+}
+.hexagon.size-12 .side-5 {
+	transform: rotate(210deg);
+	position: absolute;
+    left: 0px;
+    top: 230px;
+}
+.hexagon.size-12 .side-6 {
+	transform: rotate(270deg);
+	position: absolute;
+    left: -67px;
+    top: 115px;
+}
+.hexagon.courts.size-12 {
+	position: relative;
+	height: 580px;
+	width: 580px;
+	margin: 90px auto 20px;
+}
+.hexagon.courts.size-12 .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 500px;
+	margin-top: -11px;
+}
+.hexagon.courts.size-12 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon.courts.size-12 .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon.courts.size-12 .side-2 {
+    transform: rotate(30deg);
+    position: absolute;
+    left: 77px;
+    top: 0px;
+}
+.hexagon.courts.size-12 .side-3 {
+    transform: rotate(90deg);
+    position: absolute;
+left: 115px;
+    top: 68px;
+}
+.hexagon.courts.size-12 .side-4 {
+    transform: rotate(150deg);
+    position: absolute;
+    left: 76px;
+    top: 135px;
+}
+.hexagon.courts.size-12 .side-5 {
+	transform: rotate(210deg);
+    position: absolute;
+	    left: -1px;
+    top: 134px;
+}
+.hexagon.courts.size-12 .side-6 {
+    transform: rotate(270deg);
+    position: absolute;
+    left: -39px;
+    top: 67px;
+}
+.hexagon.courts.size-16 .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon.courts.size-16 .side-2 {
+    transform: rotate(30deg);
+    position: absolute;
+    left: 104px;
+    top: 0px;
+}
+.hexagon.courts.size-16 .side-3 {
+    transform: rotate(90deg);
+    position: absolute;
+    left: 158px;
+    top: 90px;
+}
+.hexagon.courts.size-16 .side-4 {
+    transform: rotate(150deg);
+    position: absolute;
+    left: 104px;
+    top: 180px;
+}
+.hexagon.courts.size-16 .side-5 {
+    transform: rotate(210deg);
+    position: absolute;
+    left: 2px;
+    top: 180px;
+}
+.hexagon.courts.size-16 .side-6 {
+transform: rotate(270deg);
+    position: absolute;
+    left: -52px;
+    top: 92px;
+}
+.octagon.size-16 {
+	width: 700px;
+	height: 700px;
+}
+.hexagon.size-24 {
+	position: relative;
+/*	max-width: 438px;*/
+    height: 860px;
+    width: 700px;
+    margin: 130px auto 130px auto;
+}
+.hexagon.size-24 .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 500px;
+	margin-top: -11px;
+}
+.hexagon.size-24 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.hexagon.size-24 .side-1 {
+	transform: rotate(-30deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.hexagon.size-24 .side-2 {
+	transform: rotate(30deg);
+	position: absolute;
+	left: 247px;
+    top: 0px;
+}
+.hexagon.size-24 .side-3 {
+	transform: rotate(90deg);
+	position: absolute;
+    left: 371px;
+    top: 214px;
+}
+.hexagon.size-24 .side-4 {
+	transform: rotate(150deg);
+	position: absolute;
+	left: 247px;
+    top: 428px;
+}
+.hexagon.size-24 .side-5 {
+	transform: rotate(210deg);
+	position: absolute;
+    left: 0px;
+    top: 427px;
+}
+.hexagon.size-24 .side-6 {
+	transform: rotate(270deg);
+	position: absolute;
+	left: -124px;
+    top: 213px;
+}
+.octagon {
+	position: relative;
+/*	max-width: 438px;*/
+    height: 580px;
+    width: 580px;
+    margin: 65px auto 65px;
+}
+.octagon .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.octagon .side-1 {
+	transform: rotate(-22.5deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.octagon .side-2 {
+	transform: rotate(22.5deg);
+	position: absolute;
+	left: 150px; /* Ð¼ÐµÐ½ÑÐµÑ‚ÑÑ */
+	top: 0px;
+}
+.octagon .side-3 {
+	transform: rotate(67.5deg);
+	position: absolute;
+    left: 256px;
+    top: 106px;
+}
+.octagon .side-4 {
+	transform: rotate(112.5deg);
+	position: absolute;
+    left: 256px;
+    top: 256px;
+}
+.octagon .side-5 {
+	transform: rotate(157.5deg);
+	position: absolute;
+    left: 150px;
+    top: 362px;
+}
+.octagon .side-6 {
+	transform: rotate(202.5deg);
+	position: absolute;
+	left: 0px;
+    top: 362px;
+}
+.octagon .side-7 {
+	transform: rotate(247.5deg);
+	position: absolute;
+    left: -106px;
+    top: 256px;
+}
+.octagon .side-8 {
+	transform: rotate(292.5deg);
+	position: absolute;
+    left: -106px;
+    top: 106px;
+}
+.octagon.size-6 {
+	position: relative;
+/*	max-width: 438px;*/
+	height: 280px;
+    width: 580px;
+    margin: 65px auto 65px;
+}
+.octagon.size-6 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.octagon.size-6 .side-1 {
+	transform: rotate(-22.5deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.octagon.size-6 .side-2 {
+	transform: rotate(22.5deg);
+	position: absolute;
+	left: 66px;
+	top: 0px;
+}
+.octagon.size-6 .side-3 {
+	transform: rotate(67.5deg);
+	position: absolute;
+    left: 113px;
+    top: 47px;
+}
+.octagon.size-6 .side-4 {
+	transform: rotate(112.5deg);
+	position: absolute;
+	left: 112px;
+    top: 114px;
+}
+.octagon.size-6 .side-5 {
+	transform: rotate(157.5deg);
+	position: absolute;
+    left: 66px;
+    top: 161px;
+}
+.octagon.size-6 .side-6 {
+	transform: rotate(202.5deg);
+	position: absolute;
+	left: 0px;
+    top: 161px;
+}
+.octagon.size-6 .side-7 {
+	transform: rotate(247.5deg);
+	position: absolute;
+        left: -47px;
+    top: 114px;
+}
+.octagon.size-6 .side-8 {
+	transform: rotate(292.5deg);
+	position: absolute;
+	left: -47px;
+    top: 47px;
+}
+.octagon.size-8 {
+	position: relative;
+/*	max-width: 438px;*/
+	height: 380px;
+    width: 580px;
+    margin: 65px auto 65px;
+}
+.octagon.size-8 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.octagon.size-8 .side-1 {
+	transform: rotate(-22.5deg);
+	position: absolute;
+	left: 0px;
+	top: 0px;
+}
+.octagon.size-8 .side-2 {
+	transform: rotate(22.5deg);
+	position: absolute;
+	left: 83px;
+	top: 0px;
+}
+.octagon.size-8 .side-3 {
+	transform: rotate(67.5deg);
+	position: absolute;
+    left: 142px;
+    top: 59px;
+}
+.octagon.size-8 .side-4 {
+	transform: rotate(112.5deg);
+	position: absolute;
+    left: 142px;
+    top: 142px;
+}
+.octagon.size-8 .side-5 {
+	transform: rotate(157.5deg);
+	position: absolute;
+    left: 83px;
+    top: 201px;
+}
+.octagon.size-8 .side-6 {
+	transform: rotate(202.5deg);
+	position: absolute;
+	left: 0px;
+    top: 201px;
+}
+.octagon.size-8 .side-7 {
+	transform: rotate(247.5deg);
+	position: absolute;
+    left: -59px;
+    top: 142px;
+}
+.octagon.size-8 .side-8 {
+	transform: rotate(292.5deg);
+	position: absolute;
+    left: -59px;
+    top: 59px;
+}
+.octagon.size-12 {
+	position: relative;
+/*	max-width: 438px;*/
+	height: 600px;
+    width: 600px;
+    margin: 65px auto 65px;
+}
+.octagon.size-12 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.octagon.size-12 .side-1 {
+	transform: rotate(-22.5deg);
+	position: absolute;
+    left: 20px;
+    top: 24px;
+}
+.octagon.size-12 .side-2 {
+	transform: rotate(22.5deg);
+	position: absolute;
+    left: 136px;
+    top: 25px;
+}
+.octagon.size-12 .side-3 {
+	transform: rotate(67.5deg);
+	position: absolute;
+    left: 220px;
+    top: 106px;
+}
+.octagon.size-12 .side-4 {
+	transform: rotate(112.5deg);
+	position: absolute;
+    left: 220px;
+    top: 223px;
+}
+.octagon.size-12 .side-5 {
+	transform: rotate(157.5deg);
+	position: absolute;
+	left: 136px;
+    top: 304px;
+}
+.octagon.size-12 .side-6 {
+	transform: rotate(202.5deg);
+	position: absolute;
+    left: 20px;
+    top: 305px;
+}
+.octagon.size-12 .side-7 {
+	transform: rotate(247.5deg);
+	position: absolute;
+    left: -63px;
+    top: 223px;
+}
+.octagon.size-12 .side-8 {
+	transform: rotate(292.5deg);
+	position: absolute;
+	left: -63px;
+    top: 106px;
+}
+.octagon.size-24 {
+	position: relative;
+/*	max-width: 438px;*/
+	height: 1050px;
+    width: 580px;
+    margin: 65px auto 65px;
+}
+.octagon.size-24 .side {
+	display: inline-block;
+	margin: 0px;
+	padding: 0px;
+}
+.octagon.size-24 .side-1 {
+	transform: rotate(-22.5deg);
+	position: absolute;
+	left: -20px;
+    top: 0px;
+}
+.octagon.size-24 .side-2 {
+	transform: rotate(22.5deg);
+	position: absolute;
+	left: 196px;
+    top: 0px;
+}
+.octagon.size-24 .side-3 {
+	transform: rotate(67.5deg);
+	position: absolute;
+    left: 349px;
+    top: 153px;
+}
+.octagon.size-24 .side-4 {
+	transform: rotate(112.5deg);
+	position: absolute;
+    left: 349px;
+    top: 368px
+}
+.octagon.size-24 .side-5 {
+	transform: rotate(157.5deg);
+	position: absolute;
+    left: 196px;
+    top: 521px;
+}
+.octagon.size-24 .side-6 {
+	transform: rotate(202.5deg);
+	position: absolute;
+	left: -20px;
+    top: 521px;
+}
+.octagon.size-24 .side-7 {
+	transform: rotate(247.5deg);
+	position: absolute;
+    left: -172px;
+    top: 368px;
+}
+.octagon.size-24 .side-8 {
+	transform: rotate(292.5deg);
+	position: absolute;
+    left: -174px;
+    top: 152px;
+}
+.octagon .romb {
+	width: 0;
+	height: 0;
+	border: 9px solid transparent;
+	border-bottom: 21.8px solid transparent; /* #fff */
+	position: relative;
+	background-color: transparent;
+}
+.octagon .romb:after {
+	content: '';
+	position: absolute;
+	left: -9px;
+	top: 21.8px;
+	width: 0;
+	height: 0;
+	border: 9px solid transparent;
+	border-top: 21.8px solid transparent; /*#fff; */
+}
+.octagon .romb span {
+    position: absolute;
+    top: 9px;
+    left: -5px;
+    /* color: white; */
+    z-index: 2;
+}
+.octagon .line {
+	display: flex;
+ 	justify-content: center;
+	align-items: center;
+	margin: auto;
+	width: 400px;
+	margin-top: -9px;
+}
+:root {
+  --hex-color: transparent;
+  --hex-border-color: #000;
+  --dark_blue-color: #0000ff;
+  --red-color: #ff0000;
+}
+.romb.white {  color: #ffffff; border-bottom-color: #ffffff;  }
+.romb.white:after { color: #ffffff; border-top-color: #ffffff; }
+.romb.red{  color: #ff0000; border-bottom-color: #ff0000;  }
+.romb.red:after { color: #ff0000; border-top-color: #ff0000; }
+.romb.dark_blue {  color: #0000ff; border-bottom-color: #0000ff;  }
+.romb.dark_blue:after { color: #0000ff; border-top-color: #0000ff; }
+.romb.green {  color: #336600; border-bottom-color: #336600;  }
+.romb.green:after { color: #336600; border-top-color: #336600; }
+.romb.yellow {  color: #ffff00; border-bottom-color: #ffff00;  }
+.romb.yellow:after { color: #ffff00; border-top-color: #ffff00; }
+.romb.blue {  color: #0099ff; border-bottom-color: #0099ff;  }
+.romb.blue:after { color: #0099ff; border-top-color: #0099ff; }
+.romb.turquoise {  color: #00ffff; border-bottom-color: #00ffff;  }
+.romb.turquoise:after { color: #00ffff; border-top-color: #00ffff; }
+.romb.pink {  color: #ff00ff; border-bottom-color: #ff00ff;  }
+.romb.pink:after { color: #ff00ff; border-top-color: #ff00ff; }
+.romb.orange {  color: #ff9900; border-bottom-color: #ff9900; }
+.romb.orange:after { color: #ff9900; border-top-color: #ff9900; }
+.romb.violet {  color: #9900ff; border-bottom-color: #9900ff; }
+.romb.violet:after { color: #9900ff; border-top-color: #9900ff; }
+.hex.white { background-color: #ffffff; color:#ffffff; }
+.hex.white:before { border-bottom-color: #ffffff; }
+.hex.white:after { border-top-color: #ffffff;}
+.hex.red { background-color: #ff0000; color:#ff0000; }
+.hex.red:before { border-bottom-color: #ff0000; }
+.hex.red:after { border-top-color: #ff0000;}
+.hex.dark_blue { background-color: #0000ff; color:#0000ff; }
+.hex.dark_blue:before { border-bottom-color: #0000ff; }
+.hex.dark_blue:after { border-top-color: #0000ff;}
+.hex.green { background-color: #336600; color:#336600; }
+.hex.green:before { border-bottom-color: #336600; }
+.hex.green:after { border-top-color: #336600;}
+.hex.yellow { background-color: #ffff00; color:#ffff00; }
+.hex.yellow:before { border-bottom-color: #ffff00; }
+.hex.yellow:after { border-top-color: #ffff00;}
+.hex.blue { background-color: #0099ff; color:#0099ff; }
+.hex.blue:before { border-bottom-color: #0099ff; }
+.hex.blue:after { border-top-color: #0099ff;}
+.hex.turquoise { background-color: #00ffff; color:#00ffff; }
+.hex.turquoise:before { border-bottom-color: #00ffff; }
+.hex.turquoise:after { border-top-color: #00ffff;}
+.hex.pink { background-color: #ff00ff; color:#ff00ff; }
+.hex.pink:before { border-bottom-color: #ff00ff; }
+.hex.pink:after { border-top-color: #ff00ff;}
+.hex.orange { background-color: #ff9900; color:#ff9900; }
+.hex.orange:before { border-bottom-color: #ff9900; }
+.hex.orange:after { border-top-color: #ff9900;}
+.hex.violet { background-color: #9900ff; color:#9900ff; }
+.hex.violet:before { border-bottom-color: #9900ff; }
+.hex.violet:after { border-top-color: #9900ff;}
+.hex {
+  margin-top: 10px;
+  width: 18px;
+  height: 10px;
+  background-color: var(--hex-color);
+  position: relative;
+  color: #fff;
+ /*  transform: rotate(90deg); */
+}
+.hex span {
+    position: absolute;
+    top: -2px;
+    left: 7px;
+    z-index: 2;
+	font-size: 10px;
+	/* transform: rotate(-90deg); */
+}
+.hex:before {
+  content: " ";
+  width: 0; height: 0;
+  border-bottom: 5px solid var(--hex-color);
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  position: absolute;
+  top: -5px;
+}
+.hex:after {
+  content: "";
+  width: 0;
+  position: absolute;
+  bottom: -5px;
+  border-top: 5px solid var(--hex-color);
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+}
+.cards_start {
+	display: flex;
+}
+/*
+.card {
+	margin-left: -170px;
+}
+*/
+.owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; }
+.owl-carousel .owl-item img { max-width: 100%; width: auto!important; }
+.cards_start.owl-carousel .owl-stage-outer { overflow: inherit; }
+.scene {
+  width: 220px;
+  height: 321px;
+  perspective: 600px;
+  margin-left: -120px;
+}
+.scene:first-child { margin-left: 0px; }
+.card {
+  width: 100%;
+  height: 100%;
+  line-height: 321px;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+  cursor: pointer;
+  position: relative;
+  border: 1px solid #CCC;
+  box-shadow: 0 0 10px rgba(0,0,0,0.8);
+  text-align: center;
+}
+.card img { max-width: 221px; }
+.scene-active { width: 381px; height: 551px; margin-top: -110px;}
+.scene-active .card img { max-width: 381px; }
+.card.is-flipped {
+  transform: rotateY(180deg);
+}
+.card__face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+.card__face--front {
+}
+.card__face--back {
+  transform: rotateY(180deg);
+}
+.rekl { text-align: center; }
+.lazy { margin: auto; vertical-align: middle; }
+.form-inputs {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: nowrap;
+}
+.send_build {
+	margin: 15px 0 0 0;
+		text-transform: uppercase;
+		width: 100%!important;
+}
+.send_build_mobile { display: none;
+		}
+.send_build_web { display: block; }
+.width-100 { max-width: 100%!important; }
+.more-save i img { max-height: 18px; }
+@media (max-width: 768px){
+	h1 { font-size: 24px!important; }
+	h2 { font-size: 20px!important; }
+	h3 { font-size: 16px!important; }
+	#word { /* width: 100%; */ max-width: calc(100% - 80px); }
+	.send_build_web {
+		display: none!important;
+	}
+	.w100 {  padding: 0; margin: 10px 0 0 0; width: 100%;  }
+ 	.w100 button:first-child { width: 90%; }
+	.results { overflow: auto; max-width: 100%; }
+	.navbar-form-own .btn-default { width: 100%; text-transform: uppercase; }
+	.container { padding: 15px 0px!important; }
+	.send_build_mobile { display: block; }
+	.jumbotron {
+		padding: 5px 10px!important;
+	}
+	.center { text-align: center; }
+}
+.flex-center {
+	display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.one_num {
+	width: 16px;
+	height: 16px;
+	line-height: 16px;
+}
+.flex-side { display: inline-block; }
+.mt-5 { margin-top: 5px; }
+.mt-10 { margin-top: 10px; }
+.mt-20 { margin-top: 20px; }
+@media (max-width: 420px){
+	.m-block { display: block; }
+	.m-none { display: none!important; }
+	.btn { padding: 6px 10px!important;}
+}
+.center-red { background: #f6f6f6; color: red; padding: 5px 10px; margin: auto; width: 430px; max-width: 100%; }
     </style>
 </head>
 <body>