h1 {
    text-align: center;
    color: #f3f3f3;
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    width: 80%;
    margin: 10px auto;
}

h2 {
    text-align: center;
    color: #f3f3f3;
    font-size: 18px;
    line-height: 30px;
    text-transform: uppercase;
    width: 80%;
    margin: 10px auto;
}

h3 {
    font-size: 20px;
}

p.sub-title {
    color: #f3f3f3;
    text-align: center;
    font-size: 12px;
}

img {
    max-width: 100%;
}

.logo {
    margin-bottom: 20px;
}

.mdl-layout__content {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.7)), to(transparent));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0, transparent 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0, transparent 100%);
}

.mdl-layout__header.chaos-header {
    position: relative;
    min-height: inherit;
}

.m-p-g__controls-close {
    top: 50px;
    left: initial;
    right: 30px;
}

.gradient-bg {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.7)), to(transparent));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0, transparent 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0, transparent 100%);
}

.mdl-layout__header-row nav .mdl-navigation__link {
    color: #f3f3f3;
}

.mdl-layout__header-row nav .mdl-navigation__link:hover {
    color: #ffc107;
}

.chaosage {
    background-image: url('../images/titlePage/bg2.jpg');
    background-position: center center;
    background-size: cover;
}

.chaos-header .mdl-layout__header-row {
    padding: 0;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mdl-layout__form {
    font-size: 14px;
    text-align: center;
    font-weight: 300;
    position: relative;
    z-index: 2;
    max-width: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.is-compact .mdl-layout__form span {
    display: none;
}

.is-compact .chaos-logo {
    height: 50px;
    width: 50px;
    margin-top: 7px;
}

.chaos-navigation-row {
    background-color: rgba(0, 0, 0, 0.08);
    text-transform: uppercase;
    height: 45px;
}

.chaos-navigation-row .mdl-navigation {
    text-align: center;
    max-width: 1200px;
    width: 100%;
}

.chaos-navigation-row .mdl-navigation__link {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 42px;
}

.chaos-navigation-row .is-active {
    position: relative;
    font-weight: bold;
}

.chaos-navigation-row .is-active:after {
    content: "";
    width: 70%;
    height: 2px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(255, 64, 129);
    left: 15%;
}

.chaos-card .mdl-card__title {
    padding-bottom: 0;
}

.chaos-blog-card-full-bg {
    background: url(../images/example-blog03.jpg) center / cover;
}

.chaos-blog-card-event-bg {
    background: url(../images/example-blog05.jpg) center / cover;
}

.chaos-blog-card-strip-bg {
    background: url(../images/example-blog06.jpg) center / cover;
}

.chaos-blog-card-compact .mdl-card__title {
    padding-bottom: 0;
}

.chaos-blog-card-bg>.mdl-card__actions {
    height: 52px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
}

img.article-image {
    width: 100%;
    height: auto;
}

.chaos-max-width {
    max-width: 1200px;
    margin: auto;
}

.chaos-copy {
    max-width: 700px;
}

.no-padding {
    padding: 0;
}

.no-left-padding {
    padding-left: 0;
}

.no-bottom-padding {
    padding-bottom: 0;
}

.padding-top {
    padding: 10px 0 0;
}

.chaos-share-btn {
    position: relative;
    float: right;
    top: -4px;
}

.demo-card-event>.mdl-card__actions {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.mdl-layout__drawer-button {
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
}

.mdl-layout__drawer-button .material-icons {
    line-height: 48px;
}

.mdl-textfield {}

.mdl-textfield__label {
    color: #f3f3f3;
    text-align: center;
    text-transform: uppercase;
}

.mdl-textfield__input {
    color: #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
		text-align: center;
}

.misc .mdl-textfield__label {
    font-size: 12px;
}

.misc .wrong {
    cursor: pointer;
    color: red;
    border-style: none;
    border-width: 3px;
    border-color: red;
    background: rgba(255, 255, 255, 0.30);
    padding: 5px 10px;
}

.misc .remind {
    cursor: pointer;
    color: #f3f3f3;
}

body .mdl-card__media {
    background-size: cover;
    /* height: 233px; */
}

#ident {
    max-width: 500px;
    padding: 30px 20px;
    margin: auto;
    margin-top: 30px;
    position: relative;
    z-index: 3;
}

#ident h1 {
    color: #f3f3f3;
    font-size: 18px;
    text-transform: uppercase;
    width: 80%;
    margin: 10px auto;
}

#ident hr {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 30px;
    border-color: #f3f3f3;
}

#ident p.sub-title {
    color: #f3f3f3;
    font-size: 12px;
}

#ident p.reg-text {
    color: #f3f3f3;
    font-size: 12px;
    margin: 10px 0 0;
}

#ident p {
    color: #f3f3f3;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.chaos-button {
    max-width: 100%;
    text-align: center;
    color: #f3f3f3;
    background-color: transparent;
    border: none;
    font-size: 12px;
    line-height: 46px;
    text-transform: uppercase;
    text-decoration: none;
    width: 300px;
    padding: 0;
    margin: 5px auto;
    background-image: url('../images/titlePage/button1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    text-shadow: 2px 1px 3px #000;
    cursor: pointer;
}

.chaos-button:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.btnRegister {
    width: 370px;
    font-size: 18px;
    line-height: 60px;
}

.mdl-dialog {
    width: 400px;
    padding: 0;
    max-width: 100%;
    text-align: center;
    color: #f3f3f3;
    background: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.95)), to(transparent));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.95) 80%, rgba(0, 0, 0, 0.95) 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 80%, rgba(0, 0, 0, 0.95) 100%);
}

.mdl-dialog h3 {
    font-size: 22px;
    color: #ffc107;
    text-transform: uppercase;
}

.mdl-dialog .mdl-textfield {
    padding: 10px 0;
}

.mdl-dialog .mdl-textfield__input {
    text-align: center;
}

.mdl-dialog .mdl-textfield__label {
    font-size: 12px;
    top: 10px;
}

.mdl-dialog .mdl-textfield__label:after {
    bottom: 10px;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    top: -5px;
}

.mdl-checkbox__box-outline {
    border: 2px solid rgba(255, 255, 255, 0.54);
}

.mdl-dialog .wr-block-sex {
    padding: 10px 0;
}

.mdl-dialog .wr-block-sex label {
    display: block;
    margin-bottom: 15px;
}

.mdl-dialog .wr-block-sex .radio-inline {
    display: inline-block;
    text-align: center;
    margin: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 5px;
}

.mdl-dialog .wr-block-sex .radio-inline input {
    display: none;
}

.mdl-dialog .wr-block-sex .radio-inline input:checked+div {
    border: 1px solid rgb(105, 105, 97);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(56, 56, 56, 0.5);
    -moz-box-shadow: 0px 0px 10px 5px rgba(56, 56, 56, 0.5);
    box-shadow: 0px 0px 10px 5px rgba(56, 56, 56, 0.5);
}

.mdl-dialog .wr-block-sex .radio-inline div {
    padding: 5px 10px;
}

.mdl-dialog .wr-block-sex .radio-inline img {
    display: block;
    opacity: 0.8;
}

.mdl-dialog .wr-block-sex .radio-inline:hover, .mdl-dialog .wr-block-sex .radio-inline:active, .mdl-dialog .wr-block-sex .radio-inline:focus, .mdl-dialog .wr-block-sex .radio-inline:visited {
    -webkit-box-shadow: 0px 0px 10px 5px rgba(56, 56, 56, 0.5);
    -moz-box-shadow: 0px 0px 10px 5px rgba(56, 56, 56, 0.5);
    box-shadow: 0px 0px 10px 5px rgba(56, 56, 56, 0.5);
}

img.acode {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.mdl-dialog .button-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
}

.mdl-dialog .agreements {
    padding: 5px 0;
}

.mdl-dialog .agreements .mdl-checkbox__label {
    font-size: 13px;
}

.mdl-dialog__content {
    color: #f3f3f3;
    padding: 10px;
}

#regError {
    visibility: hidden;
    text-align: center;
    z-index: 9;
    position: relative;
    top: 200px;
    border-style: double;
    border-width: 3px;
    border-color: red;
    background-color: rgba(0, 0, 0, 0.85);
    margin: 0px auto -75px;
    padding: 10px 0px;
    line-height: 30px;
}

#regError .mdl-button--raised {
    background: rgb(158, 158, 158);
}

.chaos-week-stats {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.chaos-week-stats legend {
    font-size: 18px;
    padding: 1px 5px;
    font-weight: bold;
}

.chaos-week-stats table {
    font-size: 13px;
}

.chaos-week-stats .user-info {
    color: #f3f3f3;
    width: 215px;
    font-weight: bold;
    text-align: left;
}

.chaos-week-stats .linkInfo {
    font-size: 10px;
    text-decoration: none;
}

.chaos-week-stats .user-value {
    color: #f3f3f3;
    text-align: center;
}

.chaos-week-stats .user-info img {
    width: 15px;
    height: 10px;
}

.chaos-week-stats fieldset {
    max-width: 300px;
}

.chaos-week-stats fieldset, .chaos-classes {
    display: block;
    margin: 2px auto;
    padding: 0.75em 0.35em;
    min-width: -webkit-min-content;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
}

.chaos-classes-grid {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.chaos-classes {
    text-align: center;
    background: rgba(8, 4, 1, 0.45);
    padding: 10px 0;
    margin: 0px 8px 0px 8px;
    width: 100%;
}

.chaos-classes legend {
    color: #f3f3f3;
    padding: 1px 5px;
    background: rgba(8, 4, 1, 0.10);
}

.chaos-classes-grid .block {
    display: inline-block;
    color: #f3f3f3;
    margin: 0 auto;
}

.chaos-classes .name, .chaos-classes .percent {
    display: block;
}

.chaos-classes .percent {
    color: #ffc107;
    display: block;
}

#chaos-gallary {
    position: relative;
    color: #f3f3f3;
    z-index: 2;
    margin-top: 20px;
}

#chaos-gallary h3 {
    font-size: 16px;
    line-height: 20px;
    margin: 5px;
}

#chaos-gallary img {
    max-width: 100%;
    height: auto !important;
}

footer.mdl-mini-footer {
    text-align: center;
    background-color: #2a2d2e;
    border-top: 6px solid #dddddd;
    margin-top: 15px;
    padding: 0;
    background-image: url('../images/titlePage/footer_pattern.png');
    color: #f3f3f3;
    font-size: 11px;
}

footer img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

@media (max-width: 959px) {
    .chaos-week-stats {
        position: relative;
        top: 0;
    }
    .chaos-week-stats .mdl-cell {
        width: 100%;
    }
    .mdl-layout__form {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    #ident {
        margin-top: 100px;
    }
    .btnRegister {
        font-size: 12px;
        line-height: 46px;
    }
    .mdl-layout__form {

        max-width: 80%;

    }
}

@media (min-width: 481px) and (max-width: 767px) {}

@media (min-width: 768px) and (max-width: 959px) {
    .chaos-week-stats .mdl-cell {
        width: calc(50% - 16px);
    }
    .spacer {
        display: none;
    }
}

@media (min-width: 960px) and (max-width: 1199px) {}

@media (min-width: 1200px) {}

.justify {
	text-align: justify;
}

.avatarInfoLink {
	color: gold;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}

.avatarInfoLink:visited{
	color: gold;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}

.avatarInfoLink:hover{
	text-decoration: none;
	cursor: pointer;
}

.ratingAvatarName {
	padding: 0 2px 0 2px;
	
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.ratingAvatarLevel {
	color: gold;
}