html,
body {
margin: 0;
padding: 0;
font-family: SourceSansPro,sans-serif;
font-size: 14px;
background: #fff;
color: #384f66;
}
* {
box-sizing:border-box;
}
input::-ms-clear {
display: none;
}
a,
:visited {
outline: 0;
outline: none;
}
:hover,
:active,
:focus {
outline: 0;
outline: none;
}
img {
border: none;
}
button,
input {
border: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
input, textarea {
font-family: SourceSansPro,sans-serif;
font-size: 14px;
}
button, input {
border: 0;
}
.btn {
display: inline-block;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
text-align: center;
padding: 0 15px;
width: 100%;
height: 70px;
line-height: 70px;
text-transform: uppercase;
background: #26bfa6;
box-shadow: 0 3px 0 #1c8c7a;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-ms-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
box-sizing: border-box;
font-size: 20px;
white-space: nowrap;
}
.main-wrap {
background: url('../img/mb_wo-bg.jpg') no-repeat center;
width: 100%;
position: relative;
background-size: cover;
min-height: 36.5vw;
}
.main-wrap::before {
content: '';
background: url('../img/confeti.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: -30px;
left: 0;
}
.main-inner {
position: relative;
max-width: 1600px;
margin: 0 auto;
padding: 50px 0 0;
}
.content,
.reg-form {
display: inline-block;
vertical-align: top;
position: relative;
width: 49%;
}
.content {
font-weight: 600;
}
.main-header {
text-align: center;
padding: 0 0 15px;
max-width: 560px;
}
.main-header__logo {
background: url('../img/mrbet-logo.svg');
width: 254px;
height: 99px;
display: inline-block;
background-size: contain;
}
.title-wrap {
padding: 30px 0;
text-align: center;
}
.title-inner {
-webkit-transform: rotate(-5deg) skewX(-10deg);
-moz-transform: rotate(-5deg) skewX(-10deg);
-ms-transform: rotate(-5deg) skewX(-10deg);
-o-transform: rotate(-5deg) skewX(-10deg);
transform: rotate(-5deg) skewX(-10deg);
text-shadow: 5px 5px 0 rgba(255,255,255,.1);
display: inline-block;
text-align: center;
position: relative;
}
.title {
font-size: 13px;
letter-spacing: .4vw;
color: #ffdf40;
position: relative;
text-transform: uppercase;
}
.title::before {
content: '';
height: 3px;
width: 70px;
background: #ffdf40;
box-shadow: 5px 5px 0 rgba(255,255,255,.1);
display: inline-block;
vertical-align: middle;
margin: 0 2vw;
}
.title::after {
content: '';
height: 3px;
width: 70px;
background: #ffdf40;
box-shadow: 5px 5px 0 rgba(255,255,255,.1);
display: inline-block;
vertical-align: middle;
margin: 0 2vw;
}
.title-inner {
font-family: Lato-Black,sans-serif;
line-height: 1
}
.title-inner .title__description_upper {
font-size: 4.3vw;
color: #fff;
}
.title-inner .title__description_upper::after {
background-position: -20px -40px;
margin: -6vw 0 0 19vw
}
.title-inner .title__description_lower {
font-size: 4.5vw;
color: #ffdf40;
margin-top: 1vw
}
.title-inner .title__description_lower::after {
width: 20px;
height: 20px;
background-position: -20px 0;
margin: 7vw 0 0 -3vw
}
.title-inner .title__description_highlight {
position: relative;
display: inline-block;
vertical-align: middle;
border: 5px solid #ffdf40;
border-radius: .3vw;
box-shadow: 5px 5px 0 rgba(255,255,255,.1);
padding: 0 1vw .5vw;
margin-top: -.5vw
}
.btn-wrap {
width: 420px;
margin: 20px auto;
text-align: center;
}
.mr-bet__img-wrap {
position: absolute;
min-height: 356px;
width: 535px;
overflow: hidden;;
left: calc(50vw - 670px);
bottom: 0;
}
.slot__img {
position: absolute;
background: url('../img/slot-machines-img.png') no-repeat center;
width: 100%;
height: 257px;
z-index: 1;
background-size: contain;
bottom: 55px;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
left: 50%;
}
.mr-bet__img::after {
content: '';
background: url('../img/mr-bet-img.png') no-repeat;
background-size: contain;
width: 15.625vw;
height: 15.625vw;
position: absolute;
z-index: 2;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
left: 50%;
bottom: -1vw;
}
.slot__img::after {
content: '';
background: url('../img/gifts-img.png') no-repeat;
background-size: contain;
width: 519px;
height: 139px;
position: absolute;
z-index: 0;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
left: 50%;
bottom: -104px;
}
.hint {
text-align: center;
color: #768ea6;
font-size: 14px;
white-space: nowrap;
}
@media screen and (max-width: 1650px) {
.main-wrap::before {
background-size: contain;
}
}
@media screen and (max-width: 1360px) {
.mr-bet__img-wrap {
left: 50px;
}
}
@media screen and (max-width: 1200px) {
.main-wrap::before {
display: none;
}
}
@media screen and (max-width:700px) {
.title {
font-size: 11px;
}
.title::after,
.title::before {
width: 50px;
}
.title-inner .title__description_upper {
font-size: 38px;
}
.title-inner .title__description_lower {
font-size: 28px;
}
.btn-wrap {
width: 300px;
}
.btn {
height: 50px;
line-height: 50px;
}
}
@media screen and (max-width: 500px) {
.main-header {
padding: 5px 0 0;
}
.title-wrap {
padding: 10px 0;
}
.title::after,
.title::before {
width: 30px;
}
.mr-bet__img-wrap {
margin: 0 auto;
min-height: 330px;
}
.mr-bet__img::after {
top: 5%;
}
.btn-wrap {
margin: 5px auto;
}
}
@media screen and (orientation: landscape) {
.title-wrap {
padding: 0;
}
}
.modal-ui {
border-radius: 6px;
display: inline-block;
min-width: 310px;
}
.modal-ui .modal-head {
border-radius: 4px 4px 0 0;
background: #e6ecf2;
padding: 15px 50px;
text-align: center;
position: relative;
font-family: Lato-Black,sans-serif;
font-size: 24px;
text-transform: uppercase;
font-weight: 600;
}
.modal-ui .form-button {
font-weight: 600;
}
.modal-ui .modal-body {
background: #fff;
border-radius: 0 0 4px 4px;
position: relative;
padding: 0;
}
.form-table, .selectric .label {
white-space: nowrap;
}
.form-table .form-column {
display: inline-block;
vertical-align: top;
white-space: normal;
}
.form {
padding: 15px;
margin: 0 auto;
}
.form.form-wide {
width: 560px;
}
.back-step-holder {
display: none;
text-align: center;
padding: 14px 0;
position: absolute;
left: 15px;
top: 11px;
}
.back-step-holder .back-step {
display: inline-block;
text-transform: uppercase;
font-family: Lato-Bold,sans-serif;
font-size: 14px;
}
.ui-backarrow-link::before {
background: url(../img/sprite-general.png) -40px -240px;
margin-right: 3px;
}
.ui-arrow-link::after, .ui-backarrow-link::before {
display: inline-block;
width: 10px;
height: 10px;
vertical-align: middle;
content: '';
}
.ui-backarrow-link {
color: #d9572b;
cursor: pointer;
}
.form .form-description {
text-transform: uppercase;
font-family: Lato-Bold,sans-serif;
margin: 10px 0;
text-align: center;
}
.form .step-counter {
margin: 0 0 20px;
text-align: center;
}
.modal-ui .form-group-wrapper::after {
content: '';
display: block;
clear: both;
}
.form-input {
border-radius: 4px;
border: 2px solid #e6ecf2;
width: 100%;
padding: 10px;
height: 40px;
line-height: 1;
color: #99acbf;
background: #fff;
transition: all .2s;
}
.form-input::-webkit-input-placeholder {
color: #99acbf;
}
.form-input::-moz-placeholder {
color: #99acbf;
}
.form-input:-ms-input-placeholder {
color: #99acbf;
}
.form-input:-moz-placeholder {
color: #99acbf;
}
.form-group-wrapper.link-to-login {
text-align: center;
}
.error-wrapper {
z-index: -1;
position: absolute;
right: 0;
bottom: calc(100% + 10px);
border-radius: 3px;
background: #2d4359;
font-size: 12px;
color: #fff;
opacity: 0;
-webkit-transform: translate(0,5px);
-moz-transform: translate(0,5px);
-ms-transform: translate(0,5px);
-o-transform: translate(0,5px);
transform: translate(0,5px);
-webkit-transition: all .2s;
-ms-transition: all .2s;
transition: all .2s;
}
.form-input:focus {
border-color: #d5dfe9;
box-shadow: 0 0 10px #d5dfe9;
color: #384f66;
}
.error-wrapper .help-block {
text-align: left;
margin: 0;
padding: 15px;
display: none;
}
.error-wrapper::after {
content: '';
position: absolute;
right: 5px;
bottom: -15px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #2d4359;
}
.form-group.has-success .form-input,.form-group.has-success .selectric {
background: #e6ecf2;
box-shadow: inset 0 0 0 50px #e6ecf2;
color: #384f66
}
.form-group.has-success .form-input:focus,.form-group.has-success .selectric:focus {
box-shadow: 0 0 10px #d5dfe9,inset 0 0 0 50px #e6ecf2
}
.form-group.has-success .form-input .label,.form-group.has-success .selectric .label {
color: #384f66
}
.form-group .required .form-input {
padding-right: 25px
}
.form-group.button-center {
text-align: center
}
.form-group.field-profilesettingsform-day::after,
.form-group.field-profilesettingsform-gender::after,
.form-group.field-profilesettingsform-month::after,
.form-group.field-profilesettingsform-year::after {
display: none
}
.form-group.field-signupform-confirm .error-wrapper {
position: absolute;
white-space: nowrap;
left: 20px
}
.has-error.has-error .form-input,
.has-error.has-error .selectric:not(.active) {
border-color: #d94141;
color: #d94141
}
.has-error.has-error .form-input::-webkit-input-placeholder,
.has-error.has-error .selectric:not(.active)::-webkit-input-placeholder {
color: #d94141
}
.has-error.has-error .form-input::-moz-placeholder,
.has-error.has-error .selectric:not(.active)::-moz-placeholder {
color: #d94141;
opacity: 1
}
.has-error.has-error .form-input:-ms-input-placeholder,
.has-error.has-error .selectric:not(.active):-ms-input-placeholder {
color: #d94141
}
.has-error.has-error .form-input:-moz-placeholder,
.has-error.has-error .selectric:not(.active):-moz-placeholder {
color: #d94141;
opacity: 1
}
.has-error.has-error .form-input:focus + .error-wrapper,
.has-error.has-error:hover .selectric-wrapper+.error-wrapper {
opacity: 1;
z-index: 5;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0)
}
.has-error.has-error .form-input:focus + .error-wrapper .help-block,
.has-error.has-error:hover .selectric-wrapper + .error-wrapper .help-block {
display: block
}
.has-error.has-error .selectric-wrapper.selectric-open + .error-wrapper {
opacity: 0;
z-index: -1;
-webkit-transform: translate(0,10px);
-moz-transform: translate(0,10px);
-ms-transform: translate(0,10px);
-o-transform: translate(0,10px);
transform: translate(0,10px)
}
.has-error.has-error .selectric-wrapper.selectric-open + .error-wrapper .help-block {
display: none
}
.has-error.has-error::after {
background-position: -50px -260px
}
.has-error.has-error.field-signupextendedform-gender .switch-fake-inputs {
border-color: #d94141;
box-shadow: 0 0 5px #ea9696
}
.has-error.has-error.field-signupextendedform-gender .error-wrapper {
right: auto;
left: 0
}
.has-error.has-error.field-signupextendedform-gender .error-wrapper::after {
right: auto;
left: 5px
}
.has-error.has-error.date-selector:hover .error-wrapper,
.has-error.has-error.field-rebillform-sum:hover .error-wrapper {
opacity: 1;
z-index: 5;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0)
}
.has-error.has-error.date-selector:hover .error-wrapper .help-block,
.has-error.has-error.field-rebillform-sum:hover .error-wrapper .help-block {
display: block
}
.ui-button {
display: inline-block;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
text-align: center;
padding: 0 15px;
height: 40px;
line-height: 40px;
text-transform: uppercase;
background: #d9572b;
box-shadow: 0 3px 0 #b14520;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-ms-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
}
.ui-button.ui-button-disabled {
background: rgba(217, 87, 43, 0.5);
text-shadow: none;
box-shadow: 0 3px 0 rgba(177, 69, 32, 0.65);
cursor: default;
pointer-events: none;
}
.ui-button:not(.ui-button-disabled):hover {
background: #ee6030;
}
.ui-button:not(.ui-button-disabled):active {
position: relative;
box-shadow: none;
-webkit-transform: translate(0,3px);
-moz-transform: translate(0,3px);
-ms-transform: translate(0,3px);
-o-transform: translate(0,3px);
transform: translate(0,3px);
}
.modal-ui .form-group-wrapper .ui-button {
display: block;
width: 100%;
margin-bottom: 15px;
}
.form-group-wrapper.form-group-inline {
display: inline-block;
vertical-align: top;
}
.radio-holder {
text-align: left;
padding-top: 8px;
}
.switch-inputs.form-radio .switch-fake-inputs {
border-radius: 100%;
padding: 3px 0 0 3px;
}
.radio-holder .radio-label {
width: 70px;
cursor: pointer;
}
.switch-inputs-label {
line-height: 14px;
vertical-align: middle;
max-width: 460px;
}
.switch-inputs .switch-fake-inputs::before {
display: block;
width: 10px;
height: 10px;
background: url(../img/sprite-general.png) -50px -240px;
}
.switch-inputs.form-radio .switch-fake-inputs::before {
background: #d9572b;
width: 6px;
height: 6px;
border-radius: 100%;
}
.switch-inputs .has-error .switch-fake-inputs {
border-color: #d94141;
}
.switch-inputs .switch-real-inputs:checked+.switch-fake-inputs::before,
.user-wallet .nav-item::after {
content: '';
}
.has-error.has-error.field-signupextendedform-gender .switch-fake-inputs {
border-color: #d94141;
box-shadow: 0 0 5px #ea9696;
}
.field-gap {
margin-right: 7px;
}
.field-signupextendedform-phonecode::after,
.no-validate-icons .form-group::after,
.term-confirm .form-group::after {
visibility: hidden;
opacity: 0;
}
.form-group-flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
.form-group-flex.field-size-13-23 .form-group:first-child {
width: 85px;
}
.form-group-flex.field-size-13-23 .form-group:last-child {
width: 160px;
}
.form-group-flex.field-size-13-23--inverted .form-group {
width: 100%;
}
.date-selector {
position: relative;
}
.form-group-flex.field-size-13 .form-group {
width: 80px;
}
.switch-inputs {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
margin-right: 2px;
}
.switch-inputs .switch-fake-inputs {
display: block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid #99acbf;
background-color: #e6ecf2;
cursor: pointer;
position: relative;
padding: 2px 0 0 1px;
}
.switch-inputs .switch-fake-inputs::before {
display: block;
width: 10px;
height: 10px;
background: url(../img/sprite-general.png) -50px -240px;
}
.switch-inputs .switch-real-inputs:checked+.switch-fake-inputs::before,
.user-wallet .nav-item::after {
content: '';
}
.radio-inline,
.switch-inputs-label {
display: inline-block;
}
.switch-inputs-label {
line-height: 14px;
vertical-align: middle;
}
.term-confirm .switch-inputs-label {
text-align: left;
}
.ui-default-link {
color: #d9572b;
text-decoration: underline;
cursor: pointer;
}
.regform-button-holder {
margin: 30px auto 20px;
}
.modal-ui .form-group-wrapper .ui-button {
display: block;
width: 100%;
margin-bottom: 15px;
}
.term-confirm {
text-align: center;
}
.regform-step-1,
.regform-step-2 {
display: none;
}
.js-active {
display: block;
}
.forbidden-error {
display: none;
color: #d94141;
text-align: center;
font-size: 14px;
}
.field-signupextendedform-ip.has-error .forbidden-error {
display: block;
}
@media screen and (max-width: 1350px){
.title::before,
.title::after {
width: 62px;
}
}
@media screen and (max-width: 1100px){
.main-inner {
display: flex;
flex-direction: column-reverse;
padding: 10px 0 0;
margin: 0 0 20px;
}
.content, .reg-form {
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}
.content {
margin-bottom: 330px;
}
.title-wrap {
padding: 30px 0 0;
}
.main-header {
max-width: 100%;
}
.mr-bet__img-wrap {
left: 50%;
transform: translateX(-50%);
}
.mr-bet__img::after {
width: 300px;
height: 300px;
}
}
.g-recaptcha {
-webkit-transform: scale(0.83);
transform: scale(0.83);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}