@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);
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, center,
dl, dt, dd, ol, ul, 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: 2;
vertical-align: baseline;
font-size: 100%;
}
body {
background: #efefef url('../img/noise.png') repeat 0 0;
color: #404040;
font: 13px/20px 'Tahoma', Arial, sans-serif;
}
h1 {
padding: 0 10px;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
font-weight: 300;
font-size: 2.4em;
font-family: 'Open Sans', Calibri, Arial, sans-serif;
line-height: 1.3;
}
h1 span {
display: block;
margin: 0 auto;
padding: 0.2em 0.1em 0.6em;
width: 70%;
font-size: 70%;
opacity: 0.7;
}
h2 {
padding: 10px 20px 20px;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
font-weight: 300;
font-size: 1.4em;
font-family: 'Open Sans', Calibri, Arial, sans-serif;
line-height: 1.3;
}

h5 {
padding: 10px 20px 20px;
text-align: center;
text-shadow: 1px 1px #FFFFFF;
font-weight: 300;
font-size: 0.9em;
font-family: 'Open Sans', Calibri, Arial, sans-serif;
line-height: 1.3;
}

hr {
margin: 15px auto;
width: 80%;
height: 2px;
text-align: center;
border: 0;
background: -webkit-linear-gradient(left, rgba(198,0,3,0) 0%,rgba(128, 128, 128, 0.7) 50%,rgba(198,0,3,0) 100%);
background: -o-linear-gradient(left, rgba(198,0,3,0) 0%,rgba(128, 128, 128, 0.7) 50%,rgba(198,0,3,0) 100%);
background: -ms-linear-gradient(left, rgba(198,0,3,0) 0%,rgba(128, 128, 128, 0.7) 50%,rgba(198,0,3,0) 100%);
background: linear-gradient(to right, rgba(198,0,3,0) 0%,rgba(128, 128, 128, 0.7) 50%,rgba(198,0,3,0) 100%);
}
.on_centr
{
	text-align: center;
    margin: auto;
	
}
td {vertical-align: middle;
   text-align: center;}
   
.container {position: relative;
display: block;
margin: 30px auto;
width: 70%;
max-width: 980px;
}
.container > .button {
margin: 12px;
}
/* Кнопки */
.button {
position: relative;
display: inline-block;margin: 12px;
padding: 0 20px;
height: 36px;
border: 1px solid;
border-radius: 3px;
background-clip: padding-box;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
color: white;
vertical-align: top;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
font-size: 14px;
line-height: 35px;
cursor: pointer;
}
.rounded-button{border-radius: 18px; }
.circular-button {
padding: 0;
width: 36px;
border-radius: 65px 65px 65px 65px;
}

.button:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
content: '';
pointer-events: none;
}

.button:hover:before {
background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}

.button:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.button:active:before {
content: none;
}
.button-red:disabled { 
	opacity:0.5;
}
.button-red {
border-color: #ae3623 #ae3623 #992f1f;
background: #d5452f;
background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
}

.button-red:active { 
border-color: #992f1f #ae3623 #ae3623;
background: #d5452f;
}

/* Планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 768px;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.3em;
}
}
/* Мобильный - Примечание: Дизайн для ширины 320px*/
@media only screen and (max-width: 767px) {
.container {
width: 95%;
}
.button {
min-width: auto;
min-height: auto;
font-size: 12px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.2em;
}
}
/* Мобильный - Примечание: Дизайн для ширины 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 70%;
}
}