@charset "UTF-8";
:root {
	line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
:root {
    scroll-behavior: smooth;
}
}
body {
	margin: 0;
	background-image: url(/assets/images/background.png);
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-color: #fff;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
.container {
    width: 750px;
}
}

@media (min-width: 992px) {
.container {
    width: 970px;
}
}

@media (min-width: 1200px) {
.container {
    width: 1170px;
}
}
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

a {
	text-decoration: none;
}
hr {
	border: 0;
	border-bottom: 2px dashed #999;
	background: #000;
}
big {
	text-transform: uppercase;
	color: red;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
}
#breadcrumbs {
	text-transform: uppercase;
	background-image: url(/assets/images/bg.png);
	border-radius: 15px;
	color: yellow;
}
#breadcrumbs a {
	color: white;
}

#area {
	text-transform: uppercase;
	background-image: url(/assets/images/bg.png);
	border-radius: 15px;
	color: yellow;
}
#area a {
	color: white;
}

h1 {
	text-align: center;
	font-size: 130%;
}
h2 {
	text-align: center;
	font-size: 110%;
}
h3, h4, h5, h6 {
	text-align: center;
	font-size: 90%;
}

ul {
	text-align: center;
	list-style-image: url(/assets/images/ul.png);
	list-style-position: inside;
}
ul li {
	margin: 2px 0;
}

p {
	text-align: center;
}
p.high {
	font-size: 120%;
	font-weight: bold;
}

p.veryhigh {
	font-size:xx-large;
	font-weight: bold;
}

p.highred {
	font-size: 120%;
	color: red;
	font-weight: bold;
	text-align: center;
}
p.mid {
	font-size: 110%;
}
p.midred {
	font-size: 110%;
	color: red;
	font-weight: bold;
	text-align: center;
}
p.low {
	font-size: 90%;
}
p.lowred {
	font-size: 90%;
	color: red;
	font-weight: bold;
	text-align: center;
}
p.mainpage {
	font-weight: bold;
	text-align: center;
	font-size: 200%;
	line-height: 1.5em
}
p.tel {
	font-weight: bold;
	text-align: center;
	font-size: 2em;
}
address, article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
address {
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	font-style: normal;
}
button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
}
button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}
button span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}
button:hover span {
	padding-right: 25px;
}
button:hover span:after {
	opacity: 1;
	right: 0;
}
/* header */
header {
	background-image: url(/assets/images/background.png);
	border-radius: 10px;
	text-align: center;
}
header p.high {
	font-size: 150%;
	text-transform: uppercase;
}
header p.low {
	font-size: 110%;
	text-transform: uppercase;
	color: white;
}
header a {
	color: black;
}
header a:hover {
	color: red;
	font-size: 130%;
}
header p.min {
	background-image: url(/assets/images/bg.png);
	color: white;
	font-size: 130%;
	border-radius: 10px;
}
/* nav */
.topnav {
	background-image: url(/assets/images/bg.png);
	overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/* Add an active class to highlight the current page */
.active {
	background-color: #4CAF50;
	color: yellow;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
	float: left;
	overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {

	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
	color: yellow;
}

.topnav a:active, .dropdown:active .dropbtn {
	color: red;
}


/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
	display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
	display: none;
}
.topnav a.icon {
	float: right;
	display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
	position: relative;
}
.topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
}
.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
}
.topnav.responsive .dropdown {
	float: none;
}
.topnav.responsive .dropdown-content {
	position: relative;
}
.topnav.responsive .dropdown .dropbtn {
	display: block;
	width: 100%;
	text-align: left;
}
}
/* main */
main {
	padding: 1em;
	background-image: url(/assets/images/background.png);
	text-align: center;
	border-radius: 15px;
}
main a {
	color: #005898;
	text-decoration: none;
}
main a:hover {
	color: #005898;
	text-decoration: underline;
}
main a:visited {
	color: #005898;
}
main h1 {
	text-align: center;
	font-size: 130%;
}
main h2 {
	text-align: center;
	font-size: 120%;
}
main h3 {
	text-align: center;
	font-size: 110%;
}
main p {
	text-align: center;
}
main p.high {
	font-size: 120%;
	font-weight: bold;
}
main p.highred {
	font-size: 120%;
	color: red;
	font-weight: bold;
	text-align: center;
}
main p.mid {
	font-size: 110%;
}
main p.midred {
	font-size: 110%;
	color: red;
	font-weight: bold;
	text-align: center;
}
main p.low {
	font-size: 90%;
}
main p.lowred {
	font-size: 90%;
	color: red;
	font-weight: bold;
	text-align: center;
}
main p.mainpage {
	font-weight: bold;
	text-align: center;
	font-size: 200%;
	line-height: 1.5em
}
main p.tel {
	font-weight: bold;
	text-align: center;
	font-size: 2em;
}
/* aside */

a.button {
	position: relative;
	display: inline-block;
	color: #454442;
	font-weight: bold;
	text-decoration: none;
	text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
	padding: 0.5em 0.5em;
	outline: none;
	border-radius: 3px / 100%;
	background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
	background-repeat: no-repeat;
	background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
	background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
	box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button:hover {
	transition: .5s linear;
	background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
	text-decoration: none;
	color: red;
}
a.button:active {
	top: 1px;
}

/* article */
article {
	clear: both;
	display: inline;
	
	
}
article h1 {
	text-align: center;
	font-size: 130%;
}
article h2 {
	text-align: center;
	font-size: 120%;
}
article h3 {
	text-align: center;
	font-size: 110%;
}
article h4 {
	text-align: center;
	font-size: 100%;
}
article h5 {
	text-align: center;
	font-size: 95%;
}
article h6 {
	text-align: center;
	font-size: 90%;
}
article p {
    text-align: center;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: large;
}
article p.high {
	font-size: 120%;
	font-weight: bold;
}
article p.highred {
	font-size: 120%;
	color: red;
	font-weight: bold;
	text-align: center;
}
article p.mid {
	font-size: 110%;
}
article p.midred {
	font-size: 110%;
	color: red;
	font-weight: bold;
	text-align: center;
}
article p.low {
	font-size: 90%;
}
article p.lowred {
	font-size: 90%;
	color: red;
	font-weight: bold;
	text-align: center;
}
article p.mainpage {
	font-weight: bold;
	text-align: center;
	font-size: 200%;
	line-height: 1.5em
}
article p.tel {
	font-weight: bold;
	text-align: center;
	font-size: 2em;
}
article p.opinion {
	text-align: center;
	font-size: x-large;
	background-color: #5289F7;
	color: white;
}
article p.opinion1 {
	text-align: center;
	font-size: larger;
	background-color: #F5EC03;
}

/* footer */
footer {
	clear: both;
	background-image: url(/assets/images/bg.png);
	border-radius: 15px;
}
footer p {
	line-height: 1.3em;
	text-align: center;
	color: white;
	font-weight: bold;
}
footer p.menu {
	text-transform: uppercase;
}
footer a {
	color: white;
}
footer a:hover {
	color: red;
}
footer a:visited {
	color: yellow;
}
.wow {
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}
.brand {
	border: 2px solid green;
	padding: 5px;
	border-radius: 9px;
	background: silver;
	width: 180px;
	height: 150px;
}
.brand:hover {
	border: 5px solid red;
	padding: 5px;
	border-radius: 9px;
	background: silver;
}
.brandmini {
	border: 2px solid green;
	padding: 5px;
	border-radius: 9px;
	background: silver;
	width: 100px;
	height: 70px;
}
.brandmini:hover {
	border: 5px solid red;
	padding: 5px;
	border-radius: 9px;
	background: silver;
}
.red {
	color: red;
	font-weight: bold;
}
.blue {
	color: blue;
}
.white {
	color: white;
}
.orange {
	background-color: orange;
}
.voc {
	font-weight: 300;
	font-size: 5em;
	margin: 0.1em;
}
.center {
	text-align: center;
}
.redcenter {
	color: red;
	text-align: center;
}

h3.contact {
	padding-left: 125px;
	font-size: 3em;
	color: #ff5400;
	height: 105px;
	background: url(/assets/images/contact.png) no-repeat -10px -10px;
	font-family: sans-serif;
}
p.contact {
	margin-bottom: 15px;
	font-size: 3em;
	line-height: 36px;
	font-family: sans-serif, Arial;
	color: #4b4b4b;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#contact {
	margin-bottom: 0px;
}

table {
	margin: auto;
	text-align: center;
}
table.elegance {
	background: #eaebec;
	border: #ccc solid;
	margin: auto;
	text-align: center;
}
table.elegance tr td {
	padding: 1%;
	border-top: solid #ffffff;
	border-bottom: solid #e0e0e0;
	border-left: solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table.elegance tr.big {
	font-size: 1.5em;
	font-style: oblique;
}
table.big tr td {
	font-size: 1.5em;
}
table.blau {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px;
}
table.blau thead tr {
	color: #ffffff;
	font-weight: bold;
}
table.blau thead tr td {
	border-radius: 4px 4px 0 0;
	background: #2e82c3;
}
table.blau tfoot tr {
	color: #ffffff;
	font-weight: bold;
}
table.blau tfoot tr td {
	border-radius: 4px 4px 0 0;
	background: #2e82c3;
}
table.blau tbody tr td {
	border: 1px solid #2e82c3;
	border-radius: 4px;
	background: #cbdfef;
}
table.blau tbody tr td:hover {
	background: #a2c3dd;
	transition-duration: 0.2s;
}
/* yandex search form________________________________________________________________ */

.ya-page_js_yes .ya-site-form_inited_no {
	display: none;
}

.marquee {
	margin: 0 auto;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
.marquee span {
	display: inline-block;
	padding-left: 100%;
	text-indent: 0;
	animation: marquee 15s linear infinite;
}
.marquee span:hover {
	animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
 0% {
transform: translate(0, 0);
}
 100% {
transform: translate(-100%, 0);
}
}
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	overflow: hidden;
	width: 51px;
	height: 51px;
	border: none;
	text-indent: 100%;
	background: url(/assets/images/ui.totop.png) no-repeat left top;
}
#toTopHover {
	background: url(/assets/images/ui.totop.png) no-repeat left -51px;
	width: 51px;
	height: 51px;
	display: block;
	overflow: hidden;
	float: left;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}
#toTop:active, #toTop:focus {
	outline: none;
}
#promo {
	padding: 10px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
}
.koguvcavis-varazdel {
	padding: 38px 0;
	background: #adadad;
	color: #2f2f2f;
	text-align: center;
}
.sestim-donials {
	max-width: 1200px;
	margin: auto;
	overflow: hidden;
	padding: 0 20px;
}
.sectionesag {
	width: 195px;
	height: 3px;
	background: #498a2d;
	margin: 23px auto;
}
.sagestim-lonials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.vemotau-vokusipol {
	flex: 33.33%;
	max-width: 33.33%;
	box-sizing: border-box;
	padding: 15px;
}
.testimonial {
	background: #f9f4f4;
	padding: 28px;
}
.testimonial img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
.gecedanam {
	font-size: 20px;
	text-transform: uppercase;
	margin: 20px 0;
}
.apogered-gselected {
	color: #53b32b;
	margin-bottom: 20px;
}

@media screen and (max-width:960px) {
.vemotau-vokusipol {
	flex: 100%;
	max-width: 80%;
}
}

@media screen and (max-width:600px) {
.vemotau-vokusipol {
	flex: 100%;
	max-width: 100%;
}
}

@media only screen and (max-width:992px) {
#left-buttons {
	display: none;
}
}

@media only screen and (max-width:992px) {
#left-buttons {
	display: none;
}
}

@media only screen and (min-width:992px) {
#left-buttons {
	display: block;
	right: 0;
	position: fixed;
	top: 40%;
	width: 150px;
	z-index: 100;
}
#left-buttons div>a {
	border-top: 1px solid #4c4c4c;
	display: block;
	height: 60px;
	text-align: center;
}
#left-buttons div.buy-supplement>a {
	border-top: 0;
	border-top-right-radius: 3px;
	moz-border-radius-topright: 3px;
	webkit-border-top-right-radius: 3px;
}
#left-buttons div.support>a {
	border-bottom-right-radius: 3px;
	moz-border-radius-bottomright: 3px;
	webkit-border-bottom-right-radius: 3px;
}
#left-buttons div>a i {
	color: #fff;
	font-size: 18px;
	line-height: 60px;
}
}

.chat-buttons {
    z-index: 100;
    position: fixed;
    bottom: 10px;
    display: block;
    left: 48%;
}


.field-tip {
	position: relative;
}
.field-tip .tip-content {
	background: #141414;
	box-shadow: 2px 2px 5px #aaa;
	color: #fff;
	margin-right: -220px;
	moz-box-shadow: 2px 2px 5px #aaa;
	moz-transition: opacity 250ms ease-out;
	ms-transition: opacity 250ms ease-out;
	opacity: 0;
	o-transition: opacity 250ms ease-out;
	padding: 10px;
	position: absolute;
	right: 9999px;
	top: 4px;
	transition: opacity 250ms ease-out;
	webkit-box-shadow: 2px 2px 5px #aaa;
	webkit-transition: opacity 250ms ease-out;
	width: 200px;
}
.field-tip .tip-content:before {
	border: 8px solid transparent;
	border-right-color: #141414;
	color: #141414;
	content: ' ';
	height: 0;
	left: -16px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	width: 0;
}
.field-tip:hover .tip-content {
	opacity: 1;
	right: 0px;
}
.rainbow {
	background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 140%;
}
.rainbow-animated {
	background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: rainbow 20s ease infinite;
	animation: rainbow 20s ease infinite;
	font-size: 140%;
}
 @-webkit-keyframes rainbow {
 0% {
background-position: 0% 50%
}
 50% {
background-position: 100% 50%
}
 100% {
background-position: 0% 50%
}
}
 @keyframes rainbow {
 0% {
background-position: 0% 50%
}
 50% {
background-position: 100% 50%
}
 100% {
background-position: 0% 50%
}
}
.modalDialog {
	position: fixed;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
}
.modalDialog:target {
	display: block;
	pointer-events: auto;
}
.modalDialog > div {
	width: 50%;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.close:hover {
	background: #00d9ff;
}

.ads {
	overflow: hidden;
}

.styled {
    border: 0;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.ya-page_js_yes .ya-site-form_inited_no { display: none; }

a.buttonchat {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  text-shadow: -2px 2px rgba(255,255,255,.3);
  line-height: 1.1;
  padding: .5em 3em .5em .6em;
  background: linear-gradient(#ecc92b, #fce25b);
  box-shadow:
   0 0 0 1px #fce25b inset,
   -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7),
   -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6),
   -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5),
   -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4),
   -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3),
   -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2),
   -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1),
   -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0),
   -7px 9px 1px rgba(0,0,0,.4),
   -5px 11px 1px rgba(0,0,0,.2),
   -1px 13px 4px rgba(0,0,0,.2),
   4px 16px 7px rgba(0,0,0,.3);
  transition: .4s;
}
a.buttonchat:active {
  box-shadow: none;
  -webkit-transform: translate(-7px, 8px);
  transform: translate(-7px, 8px);
}
a.buttonchat:after {
  content: "";
  position: absolute;
  top: calc(50% - .6em/2);
  right: .6em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: .37em solid;
  border-top: none;
  border-left: none;
  width: .6em;
  height: .6em;
  box-shadow: inset -2px 2px rgba(255,255,255,.3);
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    opacity: 0;
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

.modal:target {
   opacity: 1;
   pointer-events: auto; 
   overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    top: 50%;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 400px;
      margin: auto; 
  }
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}

.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}

.closebutton {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}

.closebutton:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}

.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

.upbtn {
    z-index: 9999;
    width: 100%;
    height: 16px;
    color: #FFF;
    position: fixed;
    bottom: -80px;
    cursor: pointer;
    background: #337AB7;
    transition: all .3s ease-in-out;
}
.upbtn:before {
    content: "";
    transition: all .3s ease-in-out;
    z-index: 9999;
    
    width: 100px;
    height: 100px;
    border: 16px solid #337AB7;
    position:relative;
    bottom:10px;
    left: 50%;
    margin-left: -50px;
    cursor: pointer;
    display:block;
    transform: rotate(45deg);
    background: #FFF;
}
.upbtn:hover {
    height: 20px;
}
.upbtn:hover:before {
    bottom:14px;
}

details {
	text-align: center;
}
summary {
    font-size: x-large;
	cursor: pointer;
	color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.yellowtd { background:yellow; }