body {margin: 0; padding: 0; text-align: center; background-color: #fff; font: 15px Arial; color: #000}
#inner {position: absolute; left: 1%; right: 1%; top: 5%; bottom: 5%}
#main {max-width: 1200px; margin: 0 auto}
.container {margin: 0 auto; max-width: 375px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1)}
.clearfix:after, .row:after {content: ""; display: table; clear: both}
h1 {font: bold 18px verdana; color: #2070BB; margin: 0 0 40px 0; padding: 0}
h2, h3 {font: bold 16px Arial; text-align: left; margin: 0 0 .2em 0; padding: 0}
h3 {font-size: 15px}
p, ul, li {margin:0; padding:0; text-align: left}
li {margin-left: 1.1em}
a {color: #000} a:hover {color: #666}
a {outline: none !important}
input[type="file"] {position: absolute; left: -99999rem}
.center {text-align: center}
.button-file {color: #fff; width: 177px; padding: 10px; border-radius: .5em; font-weight: bold; display: inline-block; overflow: hidden; cursor: pointer; background-color: rgba(91, 155, 213, 1)}
.button-file:hover {background-color: rgba(42, 105, 162, 1)}
.button-calc {font: 16px Arial; width: 100px; padding: 12px 10px; border-color: #bbb; border-radius: .5em; background-color: rgba(112, 173, 71, 1); color: #fff; cursor: pointer}
.result {text-align: left; background-color: rgba(91, 155, 213, .3); border: 1px solid rgba(91, 155, 213, .6); max-width: 330px; margin: 30px auto; padding: .7em; line-height: 1.6; border-radius: .2em}
.button-gen {padding: 5px 10px; border-radius: .35em; border-color: #ddd; cursor: pointer}
.result span {font-weight: bold}
.descr {padding: 1em; line-height: 1.5}
.descr h3 {margin-top: .85em}
.descr h3:first-child {margin-top: 0}
.biblio li:not(:last-child) {margin-bottom: .5em}
.col-0 {width: 100%; text-align: center}
.col-1 {width: 69.5%} .col-2 {width: 29.5%}
.col-1a {width: 49.5%} .col-2a {width: 49.5%}
.col-1, .col-2, .col-1a, .col-2a {float: left}
.logo {width: 100%; height: auto; margin-top:5px}
.image-box {margin: 0 auto 25px auto}
.checkb {color: #555; margin: 12px auto; display: none}
.cr-resizer {border: 0 !important}
.cr-viewport, .cr-image, .cr-resizer {color: #fff !important}

#back-loader {top: 0;left: 0;position: fixed;display: block;width: 100%;height: 100%;z-index: 100;background-color: rgba(180,180,180,.3);display: none}
#loader {position: absolute;left: 50%;top: 50%;z-index: 1000;margin: -20px 0 0 -20px;border: 5px solid rgba(170,170,170,1);border-radius: 50%;border-top: 5px solid #666;width: 40px;height: 40px;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite}
@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

@media print, screen and (max-width: 800px) {
	#inner {left: 2%; right: 2%; top: 3%; bottom: 3%}
	.col-0, .col-1, .col-2, .col-1a, .col-2a {width: 100%; float: none}
	.container {width: 70%; max-width: 325px; margin-top: 10px}
}
@media print {
	input, .np, .image-box, .container, #back-loader {display: none}
	#inner {left: 2% ;right: 2%; top: 2%; bottom: 1%}
	h1 {color: #000}
	h1, .result {margin-bottom: 20px}
	a {text-decoration: none}
	a:link:after, a:visited:after {content: " (" attr(href) ") "; font-size: 90%}
	div {background-color: #fff!important; border-color: #000!important}
}