/* mountains-of-christmas-regular - latin */
@font-face {
  font-family: 'Mountains of Christmas';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mountains-of-christmas-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/mountains-of-christmas-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/mountains-of-christmas-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/mountains-of-christmas-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/mountains-of-christmas-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/mountains-of-christmas-v20-latin-regular.svg#MountainsofChristmas') format('svg'); /* Legacy iOS */
}

html, body, .wrapper {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    overflow:hidden;
    background:#000000;
    font-family: 'Mountains of Christmas', cursive;
    font-size:18px;
}

label{
    display: block;
}

.wrapper {
    background: url("../img/pexels-mateusz-dach-1652385.jpg") no-repeat;
    background-size:cover;
}

.wrapper.ambient {
    animation: saturate 20s;
    animation-iteration-count: infinite;
}

h4{
    color: #333333;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 30px;
}

p{
    color: #333333;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 30px;
}

.submitBtn, button {
    padding: 10px 30px;
    cursor: pointer;
    color: #FFFFFF;
    background: #bd0f1f;
    font-weight: 700;
    font-size: 18px;
    border-radius: 5px;
    border: none;
}

button {
    font-family: "Mountains of Christmas";
    font-size:20px;
}

input{
    width: 100%;
    background: #f0f0f0;
    border-radius: 5px;
    padding: 10px 20px;
    color: #777777;
    border: none;
    width: 350px;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.5pt;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #777777 !important;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.logo {
    display:flex;
    justify-content: center;
}

.wrapper.openbet {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.logo_1, .logo_2 {
    background:url(../img/jb_logo_red-b03a6fad.png);
    background-size:cover;
    width:60px;
    height:84px;
}

.logo_bet {
    color:#FFFFFF;
    display:flex;
    align-items: center;
    font-weight:bold;
    outline:0;
    cursor:default;
    font-size:25px;
    caret-color: transparent;    
}

.logo_2 {
    background-position:right top;
}

.logo.fixed {
    width:210px;
    position:relative;
    height:147px;
    transform:scale(1) !important;
    z-index:2;
}

.logo.fixed .logo_1, .logo.fixed .logo_2 {
    position:absolute;
    height:100%;
    width:105px;
}

.logo.fixed .logo_1 {
    left:0;
}

.logo.fixed .logo_2 {
    right:0;
}

.logo_1.shake, .logo_2.shake {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.modal {
    position: fixed;
    background: #FFFFFF;
    width: 400px;
    max-width: 100%;
    min-width: 370px;
    margin-top: -150px;
    min-height: 300px;
    margin-left: -212px;
    z-index: 1;
    left: 50%;
    top: 50%;
    padding: 20px;
    border-radius: 5px;
    display: none;
    text-align: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7),
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: scaleY(.01) scaleX(0);
    animation: unfold .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes unfold {
    0% {
      transform:scaleY(.005) scaleX(0);
    }
    50% {
      transform:scaleY(.005) scaleX(1);
    }
    100% {
      transform:scaleY(1) scaleX(1);
    }
  }

@keyframes unfoldOut {
  0% {
    transform:scaleY(1) scaleX(1);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(.005) scaleX(0);
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake2 {

}

div:focus, .uneditable-input:focus {
    outline: 0 none;
    box-shadow:none;
}

@keyframes saturate {
  0% { filter: brightness(1) }
  1% { filter: brightness(0.6); }
  2% { filter: brightness(1); }
  4% { filter: brightness(0.6); }
  6% { filter: brightness(1); }
  100% { filter: brightness(1); }
}

.monster {
    position:absolute;
    z-index:1;
    opacity:0;
}

.monster1 {
    background:url(../img/monster1.png);
    background-size:contain;
    background-repeat:no-repeat;
    bottom:0;
    width:400px;
    height:300px;
    transition:2.3s;
    left:-200px;
}

.monster1.active {
    opacity:0.7;
    left:0;
}

.monster2 {
    background:url(../img/monster2.png);
    background-size:contain;
    background-repeat:no-repeat;
    right:80px;
    width:200px;
    height:315px;
    top:60px;
    transition:4.3s;
}

.monster2.active {
    opacity:0.4;
}